As a developer who occasionally creates technical content, I've always found thumbnail creation to be a friction point. I don't have a design background, and I don't want to pay for Photoshop or Canva Pro just to make a few YouTube thumbnails. I'd often spend more time fiddling with graphics software than actually creating the content.

What I wanted was a simple tool that would give me repeatable, correctly-sized and attractive images to use for video thumbnails, title cards, Open Graph images, and the like. I'm a big fan of the excalidraw approach: a simple, client-side app that runs in the browser, does one thing well, and does not require any information from its users.

Enter frameit.dev:

Initially vibe-coded as a way to quickly get a few consistent video titles created, it ended up being useful enough that I've been slowly iterating on it to make it better. The code is all open source, with a hosted version running at frameit.dev.

What it does

frameit ships a bunch of layouts that generally show some combination of a title, subtitle, logo, icon and/or website address. The layout determines where each element is placed, but they're all positioned relatively, so the same layout can be exported to make thumbs for tall formats like Tiktok, as well as wide formats like Twitter cards and OG images.

It's a pretty simple tool, not intended for people who are adept with Figma, Photoshop, Canva or the like, but who occasionally need to create a thumbnail or title card for a video or social media post.

API Coming Soon

Almost as soon as I'd generated my first few images with frameit, I wanted to be able to create them via an API.

When people share links to your content on various social media platforms, the link looks far more compelling if it has a proper Open Graph image. Sometimes you have one handy (at the right dimensions), but sometimes it's totally fine to just generate one:

In the case of the bragdoc.ai blog, it's totally fine to generate OG images like these for blog posts. Even these are far more attractive than an empty shell. That blog is hosted on Cloudflare, so other OG image generation options are limited, though they do exist.

The UI will always remain free to use, with or without an account. It just uses localStorage. The API will have a generous free tier, but ultimately it does cost a little to run the service so heavy users will need to pay a little or run their own instance.

Because the product uses the same canvas-based rendering in both the web UI and the API, it generally does an excellent job of reproducing the same output whether you use the UI or the API.

Future Plans

frameit will remain as a free, open-source and simple tool, though it will gain a few new bells and whistles besides the API. Currently there is a modest set of 9 example layouts to get you started, but I'll be adding plenty more:

What do you want to see supported next? frameit.dev has a "Bug? Feedback?" button at the bottom right that connects directly to my brain, so that's a good way to get what you want.

Try It Yourself

Head over to frameit.dev and create your first thumbnail. No signup required, no credit card, no nothing. It's just there, ready to use.

If you find it useful, star the repo on GitHub or share it with someone who might benefit. And if you build something cool with it or fork it for your own purposes, I'd love to hear about it.

The web is better when useful tools are freely available to everyone. That's the spirit behind frameit.dev - a simple tool that solves a real problem, built with modern tech, and shared with the community.