satori-html

convert HTML strings to satori-compatible VDOM objects for SVG generation.

installation

npm install @xevion/satori-html
pnpm add @xevion/satori-html
bun add @xevion/satori-html
yarn add @xevion/satori-html

what is this?

satori generates SVG from HTML and CSS, but expects React-like VDOM objects rather than HTML strings. this library bridges that gap by parsing HTML into the VDOM format satori requires.

[!NOTE] forked from natemoo-re/satori-html to fix critical bugs and modernize the codebase.

Example

import satori from "satori";
import { html } from "@xevion/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>');