satori — Convert HTML and CSS to SVG with a React-inspired approach

Overview

Satori is an enlightened library that enables developers to convert HTML and CSS into SVG format. It supports JSX syntax and a subset of HTML elements and CSS properties, making it straightforward to use for generating images like Open Graph images and social cards. Satori stands out for its ability to handle layout calculation, font, typography, and more, to generate SVGs that closely match the HTML and CSS rendered in a browser.

Key Features

JSX syntax support for easy integration with React-like components
Subset of HTML and CSS features supported, focusing on static and visible elements
Flexbox layout engine based on the SVG 1.1 spec for precise rendering
Ability to embed images and handle different image formats

Use Cases

Generating dynamic social media cards and Open Graph images
Creating SVG representations of web content for various applications
Utilizing in Next.js projects for image generation

Advantages

React-inspired approach for developers familiar with JSX
Handles complex layout and typography calculations
Supports a wide range of HTML elements and CSS properties
Generates SVGs that closely match browser-rendered HTML output

Limitations / Considerations

Does not support all HTML elements and CSS properties
SVG output may not 100% match browser-rendered HTML due to its own layout engine
Limited subset of features implemented for specific use cases

Puppeteer: A Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It's more comprehensive for browser automation but less focused on SVG generation.
PhantomJS: A headless WebKit scriptable with a JavaScript API. It's useful for web automation but doesn't specialize in SVG conversion like Satori.
Cypress: An end-to-end testing framework that also offers capabilities to interact with the browser and generate images, but it is more focused on testing rather than SVG conversion.

Basic Information

GitHub: https://github.com/vercel/satori
Stars: 12,372
License: Unknown
Last Commit: 2025-09-11

📊 Project Information

Project Name: satori
GitHub URL: https://github.com/vercel/satori
Programming Language: TypeScript
⭐ Stars: 12,372
🍴 Forks: 298
📅 Created: 2022-01-27
🔄 Last Updated: 2025-09-11

🏷️ Project Topics

Topics: [, ", c, s, s, ", ,, , ", i, m, a, g, e, ", ,, , ", i, m, a, g, e, -, g, e, n, e, r, a, t, i, o, n, ", ,, , ", i, m, a, g, e, -, g, e, n, e, r, a, t, o, r, ", ,, , ", j, s, x, ", ,, , ", o, p, e, n, g, r, a, p, h, -, i, m, a, g, e, s, ", ,, , ", s, a, t, o, r, i, ", ,, , ", s, v, g, ", ,, , ", v, e, r, c, e, l, ", ]

📚 Documentation

This article is automatically generated by AI based on GitHub project information and README content analysis

satori

Project Description