Why I Built My Own Thumbnail Generator Instead of Using Canva

I make LinkedIn carousels and blog hero images all the time, and every free thumbnail tool I tried annoyed me in roughly the same way. Canva wants an account before you can save anything. The free tier slaps a watermark on your export the moment you try to download it. The editor is heavy, built for a hundred features you'll never touch, and every image you drag in gets uploaded to a server you don't control. I got tired of it and built my own.

What actually annoyed me

None of these are new complaints, but together they add up. Wanting a login for something this small feels backwards. A watermark on the free tier means free isn't actually free, it's a trial with extra steps. And every one of these tools ships your images to a server somewhere, whether you like it or not.

So the thumbnail generator I built runs entirely in the browser instead. You drag text and images around a canvas, and none of it ever leaves your machine or asks you to sign in first.

Drag-and-snap, not sliders and coordinate fields

Most tools in this space give you X/Y number fields or sliders for positioning text. Mine lets you grab the headline, subtitle, or image and drag it straight in the preview. Get close to a third, a quarter, or the center of the frame and it snaps, the same way it snaps to another layer you've already placed, so lining a headline up with an image corner is a drag, not a coordinate lookup.

There's a small dead zone, 3 pixels, before a drag actually registers, so clicking into the text to edit it doesn't accidentally nudge it out of place. The corners of an image resize it. The small yellow handles on the sides of the selected text widen or narrow its wrap box, which changes where the line breaks fall without touching font size at all.

Export draws every pixel, at full resolution

Three formats: 1920x1080 for 16:9, 1080x1350 for 4:5, 1080x1920 for 9:16. Whatever you see in the preview is a scaled-down version of exactly what gets exported, because the export path draws to an off-screen canvas at the real source resolution and hands back a PNG blob, pixel for pixel.

PDF export works the same way underneath, one exported canvas per slide, embedded as a page. The difference is pdf-lib, the library that assembles the PDF, only loads when you click "Download PDF". If you only ever want PNGs, that code never ships to your browser at all.

The font bug that would have quietly ruined every export

This is the part worth flagging to anyone building something similar. The headline font, Anton (swapped in for licensing reasons I already covered in the tools roundup), is self-hosted through a manual @font-face rule instead of next/font. That's because next/font hands out a hashed family name, and a canvas fillText call needs a literal name it can reference, not a hash.

That fix alone wasn't enough. A browser doesn't wait for a web font to finish loading before letting canvas draw text with it, the way it waits before rendering ordinary DOM text. If Anton hasn't finished loading yet, ctx.font silently falls through to the next font in the stack, no warning, no error, and in this tool's case that fallback is Impact.

The on-screen preview would still look right, because DOM text does wait for the font. Only the exported file would be wrong, and you wouldn't know until you opened it.

The fix is two calls before every export: document.fonts.load("400 64px Anton"), then await document.fonts.ready. Cheap to write, easy to skip, and exactly the kind of bug that only shows up in the file someone downloads, never in anything you'd catch by looking at the screen.

Where I actually use it

Mostly for batching a week's worth of LinkedIn thumbnails in one sitting, keeping the same format across a carousel so the slides read as a set, and generating a multi-page PDF deck from one template instead of exporting slides by hand one at a time. Multi-slide editing and slide duplication are built in for exactly that.

This one is built for a single job: drop in a headline, a subtitle, maybe a photo, snap it into place, and export cleanly without logging into anything. Real design work, with layers and filters, is still better handled somewhere like Canva. It sits alongside the JLPT trainer and the rest of the toolkit as another case of scoping a tool to exactly the job in front of me instead of adapting to someone else's.

If you build tools with Claude Code the way I do, the font bug above is worth remembering the next time you draw custom-font text to a canvas: force-load the font with document.fonts.load() and wait on document.fonts.ready before you draw, or the canvas will happily render with whatever font happened to be available at the time.