Full CSS support. Any font. Any hosting platform. Generate beautiful social cards from HTML/CSS templates using real Chromium rendering.
npm install @ogpipe/next
click to copy
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' }, }, })
<!-- og-templates/blog.html --> <html> <head> <link href="https://fonts.googleapis.com/css2?family=Inter" /> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="w-[1200px] h-[630px] flex flex-col p-16 bg-gradient-to-br from-slate-900 to-slate-800"> <h1 class="text-5xl font-bold text-white">{{title}}</h1> <p class="text-xl text-slate-400 mt-4">{{description}}</p> <p class="text-lg text-slate-500 mt-auto">{{author}}</p> </body> </html>
$ next build && ogpipe generate ⚡ OGPipe — Generating OG images... ✅ Generated 24 OG images in 3.8s /blog/hello-world → /og/blog/hello-world.png (320ms) /blog/scaling-apis → /og/blog/scaling-apis.png (380ms) /blog/react-patterns → /og/blog/react-patterns.png (350ms) /about → /og/about.png (290ms) ... 📁 Output: public/og/ 📋 Manifest: public/og/og-manifest.json
↓ What gets generated
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.
If any of these apply to you, OGPipe solves it.
Your design uses CSS Grid, calc(), or complex positioning that Satori can't render
You need custom WOFF2 fonts without ArrayBuffer boilerplate
You deploy to AWS, Netlify, Cloudflare, or self-hosted — not Vercel
You want static build-time images with no edge function or runtime dependency
Real browser rendering vs SVG approximation
| Feature | @vercel/og | @ogpipe/next |
|---|---|---|
| CSS Grid | ✗ | ✓ |
| display: block / inline | ✗ | ✓ |
| calc(), z-index, transforms | ✗ | ✓ |
| WOFF2 custom fonts | ✗ | ✓ |
| Tailwind CSS (full) | Subset | ✓ |
| Google Fonts | Manual ArrayBuffer | <link> tag |
| Deploy anywhere | Vercel only | Any host |
| Build-time CLI generation | Per-request only | Default |
| Bundle size limit | 500KB | None |
| Local dev preview | ✗ | ✓ |
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