Satori

Enlightened library to convert HTML and CSS to SVG

Image processingSVG
vercel/satoriog-playground.vercel.appsatori

README

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:

  1. ``` js
  2. // api.jsx
  3. import satori from 'satori'

  5. const svg = await satori(
  6.   <div style={{ color: 'black' }}>hello, world</div>,
  7.   {
  8.     width: 600,
  9.     height: 400,
  10.     fonts: [
  11.       {
  12.         name: 'Roboto',
  13.         // Use `fs` (Node.js only) or `fetch` to read the font as Buffer/ArrayBuffer and provide `data` here.
  14.         data: robotoArrayBuffer,
  15.         weight: 400,
  16.         style: 'normal',
  17.       },
  18.     ],
  19.   },
  20. )
  21. ```

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

  1. ``` js
  2. '<svg ...><path d="..." fill="black"></path></svg>'
  3. ```

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 that havetype, props.children and props.style (and other properties too) directly:

  1. ``` js
  2. await satori(
  3.   {
  4.     type: 'div',
  5.     props: {
  6.       children: 'hello, world',
  7.       style: { color: 'black' },
  8.     },
  9.   },
  10.   options
  11. )
  12. ```

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 `