# Satori HTML and CSS to SVG Image Generator by Vercel

> Satori is a high-performance library by Vercel that converts HTML and CSS markup into SVG images. It powers Open Graph image generation for dynamic social cards, blog previews, and branded assets using a JSX-like API with full Flexbox layout support and custom font rendering.

- Skill: `agentskillexchange/satori-html-and-css-to-svg-image-generator-by-vercel` (Agent Skill)
- Install (CLI): `npx skillmds@latest add agentskillexchange/satori-html-and-css-to-svg-image-generator-by-vercel`
- Raw SKILL.md: https://api.skillmd.com/api/skills/agentskillexchange/satori-html-and-css-to-svg-image-generator-by-vercel/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: agentskillexchange (https://skillmd.com/u/agentskillexchange)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/agentskillexchange/satori-html-and-css-to-svg-image-generator-by-vercel

---


# Satori HTML and CSS to SVG Image Generator by Vercel

Satori is a high-performance library by Vercel that converts HTML and CSS markup into SVG images. It powers Open Graph image generation for dynamic social cards, blog previews, and branded assets using a JSX-like API with full Flexbox layout support and custom font rendering.

## Installation

Requirements and caveats from upstream:
- // Use fs (Node.js only) or fetch to read the font as Buffer/ArrayBuffer and provide data here.
- Satori currently supports three font formats: TTF, OTF and WOFF. Note that WOFF2 is not supported at the moment. You must specify the font if any text is rendered with Satori, and pass the font data as ArrayBuffer (we...
- Satori can be directly used in browser, Node.js (>= 16), and Web Workers. It bundles its underlying WASM dependencies as base64-encoded strings and loads them at runtime.

Basic usage or getting-started notes:
- Satori supports the JSX syntax, which makes it very straightforward to use. Here’s an overview of the basic usage:
- For example, the <input> HTML element, the cursor CSS property are not in consideration. And you can't use <style> tags or external resources via <link> or <script>.
- <th>Example</th>

- Source: https://github.com/vercel/satori
- Extracted from upstream docs: https://raw.githubusercontent.com/vercel/satori/HEAD/README.md

## Documentation

- https://github.com/vercel/satori#readme

## Source

- [Agent Skill Exchange](https://agentskillexchange.com/skills/satori-html-css-svg-image-generator/)