satori-html

Satori HTML

Generate a satori-friendly VDOM from a string of HTML.

What is this?

Satori is an amazing library for generating SVG strings from pure HTML and CSS.

Unfortunately, it is built on top of React's JSX and expects "React-elements-like objects". This library (satori-html) bridges that gap, generating the necessary VDOM object from a string of HTML.

Note Satori supports a limited subset of HTML and CSS features, due to its special use case. Please use inline styles rather than class-based styling!

Example

API

satori-html exports an html helper, which transforms HTML strings into an object that is compatible with satori.

import satori from "satori";
import { html } from "satori-html";

const markup = html`<div style="color: black;">hello, world</div>`;
// See https://github.com/vercel/satori#documentation
const svg = await satori(markup, {
  width: 600,
  height: 400,
  fonts: [],
});

The html utility can be used as a tagged template literal or as a function.

// Tagged Template Literal
const tagged = html`<div style="color: ${color};">hello, world</div>`;
// Function
const fn = html('<div style="color: black;">hello, world</div>');