Skip to main content

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 (File Format)-based solutions were the perfect balance of the two, being fast and dev-friendly (HTML/CSS)

However, SVG (File Format) solutions lacked layout support. Given that SVG (File Format) and HTML + CSS are alike, we can convert HTML and CSS to SVG (File Format). We can calculate the elements' positions through a layout engine and convert them into SVG (File Format) 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 (File Format) and simple CSS, Shu used RazrFalcon/resvg and yisibl/resvg-js to convert the SVG (File Format) image to PNG (File Format).

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.