Stories Behind Satori

by Shu

The potential candidates for Satori included:

• Canvas-based solutions lacked dynamic behaviors (e.g., layout) and APIs.
• Web Browser-based solutions were too slow
• SVG-based solutions were the perfect balance of the two, being fast and dev-friendly (HTML/CSS)

However, SVG solutions lacked layout support. Given that SVG and HTML + CSS are alike, we can convert HTML and CSS to SVG. We can calculate the elements' positions through a layout engine and convert them into SVG markups.

This is already done by an open-source project facebook/yoga. Converting it into WASM will also benefit by targeting Web Workers. Using a WASM-based approach also unlocked the possibility of running it on edge. Introducing support for WebAssembly at the Edge.

After simplifying the syntax with JSX and simple CSS, Shu used RazrFalcon/resvg and yisibl/resvg-js to convert the SVG image to PNG.

The Vercel team dogfooded this for a while. They also added Google Font's ?text= API, containing a specific subset of the CJK library and rendering things on the fly. The same applies to emojis.