Full CSS support. Any font. Any hosting platform. Generate beautiful social cards from HTML/CSS templates using real Chromium rendering.
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. Full CSS. Deploy anywhere.
CSS Grid, Tailwind, calc(), z-index, box-shadow — anything Chrome renders, OGPipe renders. No compromises.
OG images become static files during next build. Zero runtime dependency. No API calls in production.
Google Fonts via <link> tag. Custom WOFF2 files. Just reference them in your HTML like normal.
Works on Vercel, AWS, Netlify, Cloudflare, self-hosted. No platform lock-in.
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