A frame image written as JSX, rendered on the response path

Frog renders JSX to a PNG at request time using satori and resvg, which removes the whole problem of generating frame images with a canvas library or pre-rendering every state. You write markup and get an image.

What it costs is that rendering now sits on the response path: every button press does layout and rasterization before replying, inside a frame client’s timeout. It is also not really CSS. Satori supports a subset, flexbox works, plenty of things silently do not, and the failure is a picture that looks wrong rather than an error. Fonts must be loaded explicitly, because there is no system font stack inside a renderer that is not a browser.

handle from frog/vercel maps the app to a serverless function. Edge runtime is the unresolved question, since the renderer plus its fonts is a large bundle and Edge has the tighter limits, the faster runtime is the one least able to carry it.

The devtools import is what made it bearable: stepping through frame states locally instead of deploying and pressing buttons in a real client.