Full CSS support. Any font. Any hosting platform. Drop-in replacement for @vercel/og that uses real Chromium — not Satori's CSS subset.
import { defineConfig } from '@ogpipe/next' export default defineConfig({ templates: { blog: { file: './og-templates/blog.html' }, }, routes: { '/blog/[slug]': { template: 'blog', vars: (meta) => ({ title: meta.title }), }, '*': { template: 'default' }, }, }) // next build && ogpipe generate // → ✅ Generated 24 OG images in 3.8s
Real Chromium rendering. No CSS limitations. Deploy anywhere.
CSS Grid, Tailwind, calc(), z-index, box-shadow — anything Chrome renders, OGPipe renders. No Satori subset.
OG images become static files during next build. Zero runtime dependency. No API calls in production.
Google Fonts via <link> tag. Custom WOFF2 files. No manual ArrayBuffer loading or bundle bloat.
Works on Vercel, AWS, Netlify, Cloudflare, self-hosted. Not locked to Edge Runtime or any platform.
Run ogpipe dev — see your OG images in Twitter/LinkedIn/Slack frames with hot-reload as you edit.
Real headless Chrome renders your templates. What you see in DevTools is exactly what gets shared.
Install. Configure. Build. Your OG images are handled.
Add the package and create ogpipe.config.ts with your templates and route mappings.
Use Tailwind, Google Fonts, CSS Grid — any CSS that works in Chrome. No Satori restrictions.
Run next build && ogpipe generate. Images are written to public/og/ as static files. Done.
Start free. Scale as you grow. No surprises.
Get your API key and generate pixel-perfect OG images with full CSS support.
Get free API key