**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](https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images) and [Vercel’s Open Graph Image Generation docs →](https://vercel.com/docs/og-image-generation)
>
> To use it in Next.js, take a look at the [Open Graph Image Generation examples →](https://vercel.com/docs/og-image-generation/examples)
## 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(
hello, world
,
{
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
''
```
To render it to a PNG, use [Sharp](https://sharp.pixelplumbing.com), which draws SVG with librsvg:
```js
import sharp from 'sharp'
const png = await sharp(Buffer.from(svg)).png().toBuffer()
```
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
### JSX
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` and `useEffect` are not supported, and `dangerouslySetInnerHTML` is only supported on `