DEV Community

Killah
Killah

Posted on

I got tired of hand-rolling Open Graph images, so I built an API for it

#webdev #showdev #api #tailwindcss

If you've ever tried to auto-generate social preview images (Open Graph cards) for a blog or SaaS, you've probably hit the same wall I did.

Honestly, picking a stack for image generation feels like choosing your favorite poison:

*Puppeteer/Playwright gets the job done, but maintaining headless Chromium on serverless with cold starts and mismatched font rendering is a nightmare.

*@vercel/og (Satori) is super fast, but its Tailwind subset is rough. No gap utilities, no -950 colors, and instead of throwing build errors on unsupported CSS, it just silently ignores them. You only find out after rendering.

*node-canvas gives you pixel perfection, but without a layout engine, you're literally hand-calculating coordinates for every piece of text.

While none of these individual items are complex, each carries hidden friction that eats up your time.

Full disclosure: I built Renderfy after hitting this exact wall one too many times. It's a stateless API, you POST Tailwind/HTML/Markdown (or a code snippet, chart, diagram, or LaTeX) and get back a PNG/JPEG/WebP/PDF.

An OG image call looks like this:

curl -X POST https://renderfy.io/api/v1/render \
  -H "Authorization: Bearer rfy_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "tailwind",
    "content": "<div class=\"flex h-full w-full flex-col justify-center bg-zinc-900 p-16\"><span class=\"text-emerald-400 text-sm font-mono uppercase\">Live Report</span><h1 class=\"text-6xl font-bold text-white\">Revenue up 42%</h1></div>",
    "options": { "format": "png", "dimensions": "og-image" }
  }' \
  --output og-image.png
Enter fullscreen mode Exit fullscreen mode

dimensions: "og-image" is a built-in preset that locks output to 1200×630 — the safe universal size for Facebook, LinkedIn, Slack, and X large-card previews — so you don't have to hardcode magic numbers or guess what each platform actually crops to.

There's a free tier (100 credits, no card required) if you want to poke at it and a live Playground on the homepage if you'd rather try it in-browser before writing any code: https://renderfy.io

Curious what other input types people would actually reach for here, has anyone else built their own OG-image pipeline and hit different walls than the ones above?

Top comments (0)