Cardsmith vs @vercel/og vs Puppeteer
There are three common ways to generate a dynamic Open Graph image for every page. They're genuinely different tools — here's an honest look at where each one wins, from the people building one of them.
| Cardsmith | @vercel/og | Puppeteer / Playwright | |
|---|---|---|---|
| Setup | Put a URL in your og:image tag. Done. | Add an Edge route + write JSX per template; ship fonts. | Install & host headless Chromium; write screenshot code. |
| Where it runs | Our servers. Nothing to deploy or scale. | Your serverless/edge (cold starts, bundle-size limits). | Your server/container — a browser process to babysit. |
| Rendering engine | satori + resvg (SVG→PNG, no browser). | satori (same engine, in your function). | A real browser — full CSS/JS fidelity. |
| Works on any stack | Yes — static sites, Hugo, WordPress, Rails, anything. | Really Next.js / Vercel-centric. | Anywhere you can run Chromium. |
| Arbitrary HTML/CSS/JS | No — a curated template + params. | No — a JSX subset satori supports. | Yes — pixel-perfect anything. |
| Cost model | Free / $9 / $29-mo. No infra bill. | Free library — you pay compute + maintenance. | Free tools — you pay infra + ops time. |
| Maintenance | None — we own uptime, fonts, updates. | You own the code, fonts, and deploys. | You own the browser farm and its crashes. |
@vercel/og — great if you live in Next.js
@vercel/og is excellent, and it's free. It runs the same underlying engine we do (satori), directly inside a Vercel Edge Function. If your app is already on Next.js/Vercel and you're comfortable writing a JSX template per card and shipping your own fonts, it's hard to beat — you get full control and no third-party dependency. The trade-offs are that it's really tied to the Vercel/Next.js world, you own the maintenance (fonts, deploys, edge bundle-size limits, cold starts), and it doesn't help a Hugo blog, a WordPress site, or a Rails app.
Puppeteer / Playwright — maximum fidelity, maximum ops
Driving a real headless browser to screenshot an HTML page gives you pixel-perfect, arbitrary CSS and JavaScript — anything a browser can render, you can turn into an image. That flexibility is the reason to choose it. The cost is operational: you're now running and scaling a Chromium process, each render is heavy (hundreds of MB of RAM, slow cold starts), and browsers crash in creative ways. For the narrow job of "a nice social card per page," it's usually far more machinery than the problem needs.
Cardsmith — a hosted URL, on any stack
Cardsmith is for when you just want good dynamic OG images without running anything. You put a URL in your og:image tag — with the title, theme, and text as query params — and get back a polished 1200×630 PNG. No browser, no edge function, no fonts to ship, no framework assumptions: it works on a static site, Hugo, WordPress, Rails, or plain HTML exactly the same way. You trade the total control of the DIY options for zero infrastructure and zero maintenance. If your card fits a clean template with your own text and colors (and most do), that's a good trade.
Short version: already on Next.js and want full control → @vercel/og. Need pixel-perfect arbitrary HTML → a headless browser. Want dynamic OG images on any stack with nothing to run → Cardsmith. Try one live on the homepage →
Comparing hosted tools instead? See Cardsmith vs Bannerbear, Placid, and HTML/CSS to Image — or the full alternatives hub.
See it for yourself.
Free tier is 100 images/day, no signup — tweak one on the homepage playground, browse the examples gallery, or read the API docs.
See pricing →