![Satori](.github/card.png) **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 →](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation) > > To use it in Next.js, take a look at the [Next.js Open Graph Image Generation template →](https://vercel.com/templates/next.js/og-image-generation) ## 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 '' ``` 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`, `useEffect`, `dangerouslySetInnerHTML` are not supported. #### Use without JSX If you don't have JSX transpiler enabled, you can simply pass [React-elements-like objects](https://reactjs.org/docs/introducing-jsx.html) 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 ) ``` ### HTML Elements 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 `

c	File Name	Size	T	Date
zip	dist/	4096	---	2026-06-10 03:37:04
zip	node_modules/	4096	---	2026-06-10 03:37:04
-	LICENSE	16725	%	2026-05-20 11:21:47
-	README.md	25785	md	2026-05-20 11:21:47
-	package.json	3792	json	2026-05-20 11:21:47
-	yoga.wasm	81356	wasm	2026-05-20 11:21:47

🌲 / quartz node_modules satori

control-panel