satori

Name: satori
Availability: InStock
Author: Vercel

Convert HTML/CSS into SVG Open Graph images for Next.js edge runtimes.

246|42|Updated Mar 4, 2026

Search Tags:#nextjs #svg #image-generation #open-graph #og-image #edge-runtime #satori

Ready to run

npx skills add https://github.com/vercel/vercel-plugin --skill satori-vercel

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: satori
Source: https://github.com/vercel/vercel-plugin/tree/main/skills/satori
Command: npx skills add https://github.com/vercel/vercel-plugin --skill satori-vercel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts HTML and CSS into SVG Open Graph images to automate OG image creation for social previews.

Core Features & Use Cases

Converts JSX-like HTML/CSS into scalable SVG for OG images.
Integrates with Next.js and edge runtimes using a rendering workflow to produce social previews.
Use cases include dynamic social previews for blog posts, marketing pages, and product launches.

Quick Start

Install satori and @vercel/og and configure an OG route to render an SVG image.

Frequently Asked Questions about satori

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate dynamic Open Graph images for Next.js?▼

Satori integrates with Next.js edge runtimes to convert JSX-like HTML and CSS into SVG Open Graph images, enabling dynamic social previews for blogs, docs, and product pages.

What is the best way to convert HTML and CSS to SVG for social previews?▼

The best way to convert HTML and CSS to SVG for social previews is using Satori, which transforms JSX-like markup into scalable SVG Open Graph images suitable for marketing pages and product launches.

Can I use Satori with edge runtime to produce OG images?▼

Yes, Satori works with edge runtime environments to produce OG images. It integrates with Next.js and @vercel/og to configure an OG route that renders SVG output efficiently.

Do I need @vercel/og to automate OG image generation in Next.js?▼

Yes, you need to install Satori and @vercel/og to automate OG image generation in Next.js. Together they provide the rendering workflow required to configure an OG route and output SVG images.

Does Satori support standard CSS properties when converting HTML to SVG?▼

Satori supports a subset of standard CSS properties when converting JSX-like HTML to SVG. It is designed specifically for Open Graph image generation rather than full general-purpose HTML rendering.