Generate a satori-friendly VDOM from a string of HTML.
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!
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>');