satori

!Satori

Satori: Enlightened library to convert HTML and CSS to SVG.

> Note
>
> To use Satori in your project to generate PNG images like Open Graph images and social cards, check out our announcement and Vercel’s Open Graph Image Generation →
>
> To use it in Next.js, take a look at the Next.js Open Graph Image Generation template →

Overview

Satori supports the JSX syntax, which makes it very straightforward to use. Here’s an overview of the basic usage:

``jsx
// api.jsx
import satori from 'satori'

const svg = await satori(


,
{
width: 600,
height: 400,
fonts: [
{
name: 'Roboto',
// Use fs (Node.js only) or fetch to read the font as Buffer/ArrayBuffer and provide data here.
data: robotoArrayBuffer,
weight: 400,
style: 'normal',
},
],
},
)
`

Satori will render the element into a 600×400 SVG, and return the SVG string:

`js
''
`

Under the hood, it handles layout calculation, font, typography and more, to generate a SVG that matches the exact same HTML and CSS in a browser.




Documentation

$3

Satori only accepts JSX elements that are pure and stateless. You can use a subset of HTML
elements (see section below), or custom React components, but React APIs such as useState, useEffect, dangerouslySetInnerHTML are not supported.

#### Use without JSX

If you don't have JSX transpiler enabled, you can simply pass React-elements-like objects that have type, props.children and props.style (and other properties too) directly:

`js
await satori(
{
type: 'div',
props: {
children: 'hello, world',
style: { color: 'black' },
},
},
options
)
`

$3

Satori supports a limited subset of HTML and CSS features, due to its special use cases. In general, only these static and visible elements and properties that are implemented.

For example, the HTML element, the cursor CSS property are not in consideration. And you can't use