Repolode
Submit
vercel

vercel/satori

Enlightened library to convert HTML and CSS to SVG, using JSX input and a custom layout engine.

View on GitHubWebsite
Stars
14,121
Forks
392
Open issues
152
Last commit
2 days ago

What is it?

Satori takes a JSX element tree or plain React-like objects, along with font data and a canvas size, and returns an SVG string. It implements its own layout engine on top of Taffy for Flexbox, Grid and block layout, and HarfBuzz for text shaping, so the output aims to match what a browser would render for the supported subset of HTML and CSS.

It is not a full browser engine. Supported elements and CSS properties are listed in a compatibility table, and unsupported properties are ignored or throw depending on the case. Satori accepts pure, stateless components only, so React hooks such as useState are not available. Fonts in TTF, OTF, WOFF and WOFF2 formats must be supplied explicitly.

To produce PNG files, the SVG can be passed to Sharp, which rasterizes it with librsvg. The project is the engine behind Vercel's Open Graph image generation.

Key features

  • 01Converts JSX or React-like objects into SVG strings
  • 02Flexbox, Grid and block layout via Taffy
  • 03Text shaping with HarfBuzz, including OpenType features and right-to-left text
  • 04Supports TTF, OTF, WOFF and WOFF2 fonts
  • 05Stylesheet support with selectors, @media and @container queries
  • 06Experimental WebGL canvas and perspective transforms

Use cases

  • Generating dynamic Open Graph and social card images at build or request time
  • Rendering text-heavy graphics as SVG for server-side image pipelines
  • Producing PNG images by piping SVG output through Sharp

Quick start

  1. 1

    Install the satori package from npm (the install command is not shown in the README excerpt)

  2. 2

    Call satori() with a JSX element, width, height and fonts, as in the Overview example

Things to know

  • Only a subset of HTML and CSS is supported, and output may not match browser rendering exactly.
  • Licensed under MPL-2.0, which requires sharing source changes to modified files.

Topics

#svg#image-generation#jsx#og-image#layout-engine#typescript#css#image#image-generator#opengraph-images

FAQ

What is satori?
Enlightened library to convert HTML and CSS to SVG, using JSX input and a custom layout engine. Satori takes a JSX element tree or plain React-like objects, along with font data and a canvas size, and returns an SVG string. It implements its own layout engine on top of Taffy for Flexbox, Grid and block layout, and HarfBuzz for text shaping, so the output aims to match what a browser would render for the supported subset of HTML and CSS.
Is satori free to use? What license does it have?
satori is open source under the MPL-2.0 license. Check the license terms before using it in commercial products.
Is satori still maintained?
Actively maintained. The last commit to satori was on Oct 20, 2026.
What can I use satori for?
Generating dynamic Open Graph and social card images at build or request time Rendering text-heavy graphics as SVG for server-side image pipelines Producing PNG images by piping SVG output through Sharp
How do I install satori?
Install the satori package from npm (the install command is not shown in the README excerpt) Call satori() with a JSX element, width, height and fonts, as in the Overview example
Where can I get satori?
The source code and installation instructions are on GitHub: https://github.com/vercel/satori

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects