<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[combineimages]]></title><description><![CDATA[combineimages]]></description><link>https://combineimages.hashnode.dev</link><generator>RSS for Node</generator><lastBuildDate>Thu, 29 Oct 2026 09:19:53 GMT</lastBuildDate><atom:link href="https://combineimages.hashnode.dev/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[🖼️ How I Built a Simple Image Combiner That Runs 100% in the Browser]]></title><description><![CDATA[Combine Images Online is the easiest way to merge two images with your own effect. Upload, describe, and get your new image in seconds.]]></description><link>https://combineimages.hashnode.dev/how-i-built-a-simple-image-combiner-that-runs-100-in-the-browser</link><guid isPermaLink="true">https://combineimages.hashnode.dev/how-i-built-a-simple-image-combiner-that-runs-100-in-the-browser</guid><category><![CDATA[AI]]></category><category><![CDATA[AI Image Generation]]></category><dc:creator><![CDATA[Wei Guan]]></dc:creator><pubDate>Fri, 13 Jun 2025 08:49:36 GMT</pubDate><content:encoded><![CDATA[<p>If you've ever needed to merge multiple screenshots into a single image — maybe for a blog post, tutorial, or app store submission — you probably know how annoyingly tedious that process can be.</p>
<p>Most tools are either:</p>
<ul>
<li><p>Desktop-only (hello, Photoshop)</p>
</li>
<li><p>Overkill</p>
</li>
<li><p>Full of ads and watermarks</p>
</li>
<li><p>Or just… slow</p>
</li>
</ul>
<p>I built <a target="_blank" href="https://combineimages.online"><strong>Combine Images</strong></a> to solve that problem in the simplest way possible.</p>
<hr />
<h3 id="heading-why-i-built-it">🛠️ Why I Built It</h3>
<p>I'm a product manager and part-time builder. I often need to:</p>
<ul>
<li><p>Combine mobile UI screenshots for feature proposals</p>
</li>
<li><p>Make long vertical scroll images for documentation</p>
</li>
<li><p>Create “before and after” grids for product showcases</p>
</li>
</ul>
<p>Doing this manually in design tools felt heavy and slow. I just wanted something:</p>
<ul>
<li><p>Lightweight</p>
</li>
<li><p>Instant</p>
</li>
<li><p>Private (runs locally, no uploads)</p>
</li>
<li><p>With a clean export</p>
</li>
</ul>
<p>So I built one.</p>
<hr />
<h3 id="heading-how-it-works">💡 How It Works</h3>
<p><a target="_blank" href="https://combineimages.online"><strong>Combine Images</strong></a> is a client-side web app. That means:</p>
<ul>
<li><p>No images are uploaded to any server</p>
</li>
<li><p>All processing happens in your browser</p>
</li>
<li><p>You can use it offline after the first load (thanks to service workers)</p>
</li>
</ul>
<p>Key features:</p>
<ul>
<li><p>Horizontal / Vertical / Grid layout options</p>
</li>
<li><p>Adjustable spacing and background color</p>
</li>
<li><p>Drag &amp; drop support</p>
</li>
<li><p>Exports as PNG</p>
</li>
</ul>
<p>No login. No watermark. No ads.</p>
<hr />
<h3 id="heading-tech-stack">⚙️ Tech Stack</h3>
<p>It’s built with:</p>
<ul>
<li><p><strong>Vanilla JS + HTML5 canvas</strong> for rendering</p>
</li>
<li><p><strong>Parcel</strong> for bundling</p>
</li>
<li><p>A sprinkle of <strong>Tailwind CSS</strong> for UI</p>
</li>
<li><p>Hosted on <strong>Cloudflare Pages</strong></p>
</li>
</ul>
<p>I'm deliberately keeping it framework-free to make it snappy and keep the bundle size under control.</p>
<hr />
<h3 id="heading-try-it-out">🔗 Try It Out</h3>
<p>If you ever need to quickly combine a few images (screenshots, app UIs, flow charts), give it a try:</p>
<p>👉 <a target="_blank" href="https://combineimages.online">https://combineimages.online</a></p>
<p>It’s totally free and open to feedback.</p>
<hr />
<h3 id="heading-whats-next">🤔 What’s Next?</h3>
<p>A few features I’m considering:</p>
<ul>
<li><p>Output to PDF</p>
</li>
<li><p>Grid layout with fixed rows/columns</p>
</li>
<li><p>Mobile-first UI improvements</p>
</li>
<li><p>Image annotation or arrows?</p>
</li>
</ul>
<p>If you have suggestions or want to fork it into something better, I'd love to chat!</p>
<hr />
<h3 id="heading-final-thoughts">✍️ Final Thoughts</h3>
<p>This was one of those weekend projects that actually solved a real problem I had — and it’s been fun seeing it become a part of my own daily workflow.</p>
<p>If you're building small tools like this, or using simple utilities to improve your dev or product workflows, I'd love to hear what works for you.</p>
<p>Drop your favorite “tiny web tools” in the comments 👇</p>
]]></content:encoded></item></channel></rss>