DEV Community

ABHISHEK KUNDALIA
ABHISHEK KUNDALIA

Posted on

Stop using Figma for OG images (I built an API to automate it)

I love coding, but I hate design.

Every time I shipped a blog post, I had to open Figma, find a template, edit text, export PNG, upload to S3... it took 20 minutes.

So I spent this weekend building an automated solution using Next.js + Satori.

The Stack:

  • Next.js App Router (Edge Runtime)
  • @vercel/og (Satori) - Converts HTML/CSS to SVG to PNG
  • Tailwind CSS for styling

How it works:
I created an API route /api/og that takes query parameters (title, theme). Satori renders a React component into an image on the fly.

The Result:
Now I just paste this URL into my meta tags:
https://ogimage.art/api/og?title=My%20Post

It generates a 1200x630 image instantly.

Try it yourself:
I made it a free tool for everyone.
👉 ogimage.art

(The code is private for now, but I might open source the core generator engine later. Let me know if you're interested!)

Top comments (0)