satori

Convert JSX-like HTML and CSS into SVG for Open Graph images.

Updated Nov 7, 2025

Search Tags:#svg #open graph #og image #satori #html to svg #css to svg

Ready to run

npx skills add https://github.com/junwonp/portfolio --skill satori-junwonp

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts HTML and CSS into scalable SVGs to generate dynamic OG and social images, eliminating manual SVG creation and complex tooling.

Core Features & Use Cases

Converts JSX-like HTML and CSS into SVG for Open Graph imagery.
Integrates with Next.js app routes and edge runtimes using the Vercel OG workflow.
Outputs standalone SVG when a serverless or edge environment is used for lightweight rendering.

Quick Start

Provide a JSX-like HTML/CSS snippet to generate an SVG OG image with Satori.

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 from HTML and CSS?▼

Satori converts JSX-like HTML and CSS into SVG to generate dynamic Open Graph images. It outputs standalone SVGs for social thumbnails, eliminating manual SVG creation and complex tooling.

Can I use Satori to generate OG images in Next.js edge runtimes?▼

Yes, Satori integrates with Next.js app routes and edge runtimes using the Vercel OG workflow. It outputs standalone SVG for lightweight rendering in serverless or edge environments.

What is the best way to turn HTML into SVG for social thumbnails?▼

The best way to turn HTML into SVG for social thumbnails is using Satori to convert JSX-like markup and CSS into scalable SVGs. It provides deterministic rendering for dynamic OG images without complex tooling.

Does Satori support explicit font loading for SVG generation?▼

Yes, Satori supports explicit font loading for SVG generation. You must provide font data to ensure deterministic rendering when converting HTML and CSS into SVG OG images.

What are the limitations of using CSS with Satori for OG images?▼

Satori adheres to a subset of CSS features for deterministic rendering when generating OG images. It does not support the full CSS specification, meaning some complex CSS properties may not render correctly.