About Vercel OG Image Playground
Vercel's OG Image Playground is a browser tool for testing Open Graph image cards. You write a layout, check the preview, and export the card in the format you need.
What it does
The playground renders a layout written in JSX-style code, using the approach behind the @vercel/og package. You can change the container size, pick an emoji set and embed fonts. A debug mode shows how the layout is built. When the card looks right, you export it as SVG, PNG, PDF or HTML, depending on the target.
Key features
- Live preview of card layouts
- SVG, PNG, PDF and HTML export
- Size presets such as 2:1 and 1.9:1
- Choice of emoji sets
- Debug mode and embedded fonts
Who it's for
Web developers who add social share images to a site will use it most. Designers can also use it to check a card layout before handing it to a developer.
Pricing and good to know
The engine behind the playground, Satori, is open source under the MPL-2.0 licence and is listed on GitHub. Styling is limited to the subset of CSS that Satori supports, so some effects may need a different approach. Test each card at its final size before you ship it.
Highlights
- Live preview of Open Graph card layouts
- Export as SVG, PNG, PDF or HTML
- Preset container sizes for social cards
- Emoji set selection
- Embed fonts and debug the layout
