Beautiful OG images, generated from HTML.
One API call turns your HTML template into a pixel-perfect Open Graph image. Shared links get 2-3x more clicks with a proper preview image.
Just published a new guide on zero-downtime deployments with database migrations. Took us 3 months to figure this out at scale.
Deployments
Template Gallery
Start with a template, customize with your data.
Every template is standard HTML + CSS. Use Tailwind, Google Fonts, inline SVG — anything that works in a browser.
Zero-Downtime
Deployments
A practical guide to shipping without breaking prod
HTML to Image API.
Now with Templates.
Design once in HTML + CSS.
Generate thousands of unique images via API.
Dynamic OG Images,
Generated from HTML.
One API call turns your template into a pixel-perfect social preview image. Hosted on a global CDN.
Render an Image
from HTML + CSS
Full API reference for the RendShot rendering endpoint. PNG, JPEG, WebP output.
api.rendshot.ai/v1
Why Not Self-Build?
Three ways to generate OG images. One requires zero infrastructure.
| Feature | RendShot | @vercel/og | Puppeteer |
|---|---|---|---|
| HTML & CSS support | Full — any HTML, Tailwind, web fonts | JSX only — no CSS files, limited layout | Full — but you host it |
| Tailwind CSS | |||
| Custom web fonts | 50+ auto-loaded, or any URL | Manual font file embedding | Full — but needs font install |
| Render time | <1.2s median | <500ms (Edge) | 2-5s (cold start) |
| Infrastructure | Managed — zero ops | Vercel Edge (tied to Vercel) | Self-hosted Docker + Chromium |
| CDN delivery | Built-in global CDN | Vercel CDN only | DIY (S3 + CloudFront, etc.) |
| Template system | Variables + validation + versioning | None — hardcoded in route | DIY |
| Free tier | 100 images/month | Unlimited (Vercel plan limits) | Self-hosted cost |
When to use @vercel/og instead: If you're on Vercel, only need simple text layouts, and want sub-500ms Edge rendering with zero external dependencies — Satori is a great choice. RendShot is better when you need full CSS control, Tailwind, or complex multi-element designs.
How It Works
Three steps to dynamic OG images.
Design your OG template
Write HTML + CSS for your 1200×630 OG layout. Use Tailwind, Google Fonts, any CSS. Add {{variables}} for dynamic content.
Call the API on publish
When a blog post is published or a product is updated, one POST request generates a fresh OG image with the latest data.
Set the meta tag
Point your og:image meta tag to the returned CDN URL. Every platform — Twitter, LinkedIn, Slack, Discord — renders your image.
Integration
Works with any stack.
Next.js, Astro, Hugo, WordPress, or a plain cron job — if you can make an HTTP request, you can generate OG images.
// app/api/og/route.ts
import { RendShot } from '@rendshot/sdk'
const client = new RendShot({ apiKey: process.env.RENDSHOT_API_KEY })
export async function GET(req: Request) {
const { searchParams } = new URL(req.url)
const title = searchParams.get('title') ?? 'My Blog'
const image = await client.renderImage({
template_id: 'blog-og',
variables: { title, author: 'Jane Doe' },
width: 1200,
height: 630,
})
return Response.redirect(image.url)
}Pricing
Start free. Scale when ready.
Common questions about OG image generation
What is an OG image and why does it matter?
An OG (Open Graph) image is the preview image shown when your link is shared on Twitter, LinkedIn, Slack, Discord, and other platforms. Pages with OG images get 2-3x more clicks than those without. RendShot generates these images dynamically from HTML templates.
How is this different from @vercel/og (Satori)?
Vercel OG uses Satori which only supports a subset of CSS via JSX — no Tailwind, no CSS files, limited layout options. RendShot renders real HTML with a full browser engine, supporting any CSS feature including Tailwind, Grid, Flexbox, and custom fonts.
Can I use my existing HTML templates?
Yes. RendShot renders standard HTML + CSS. If it works in a browser, it works in RendShot. You can use Tailwind, Google Fonts, inline SVGs, and any CSS feature. Just replace dynamic parts with template variables.
What about caching and performance?
Every generated image is served via a global CDN with automatic caching. Median render time is under 1.2 seconds. For frequently accessed images, the CDN serves them in milliseconds.
Is there a free tier?
Yes. The free plan includes 100 image renders per month, 7-day image retention, and full API access. No credit card required. The Pro plan ($19/month) gives you 10,000 renders and 30-day retention.
Stop shipping pages without OG images.
100 free OG images per month. No credit card. Set up in under 5 minutes.