satori

Convert HTML and CSS into SVG images with the Satori library.

246|42|Updated Mar 4, 2026

Search Tags:#social media #nextjs #svg #og image #satori #html to svg

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies the creation of dynamic Open Graph (OG) images, commonly used for social media previews, by converting HTML and CSS into SVG format.

Core Features & Use Cases

HTML/CSS to SVG Conversion: Leverages Satori to render UI designs into scalable vector graphics.
Dynamic Image Generation: Ideal for creating personalized OG images for blog posts, product pages, or user profiles.
Next.js Integration: Seamlessly integrates with Next.js App Router and convention-based image routes for automatic metadata generation.

Quick Start

Use the satori skill to generate an OG image with the title 'Welcome to My Blog'.

Frequently Asked Questions about satori

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

FAQPage Schema

How do I generate dynamic OG images from HTML and CSS?▼

Yes, Satori integrates seamlessly with Next.js App Router and convention-based image routes. This integration allows you to automatically generate metadata and serve dynamic OG images using serverless edge functions.

Can I use Next.js serverless edge functions for OG image generation?▼

When generating SVG images from HTML with Satori, you need to handle explicit font loading. Because SVG rendering requires specific font data, you must explicitly load and provide the fonts to ensure the dynamic OG image text renders correctly.

Why do I need to load fonts explicitly when converting HTML to SVG?▼

To generate dynamic OG images from HTML and CSS, you can use Satori to convert your markup and styles into SVG format. This approach allows you to render personalized social media previews dynamically for blog posts or product pages.

What is the best way to create personalized social media previews?▼

Satori supports dynamic content rendering, allowing you to pass dynamic data into your HTML templates. This capability makes it ideal for creating unique Open Graph images for user profiles, product pages, or blog posts.