Handbook
Charts, game HUDs, mini-programs, and OffscreenCanvas still need layout, cascade, and hit-testing — but often without a real DOM.
The browser gives you a retained layout engine for free. On canvas (or non-DOM hosts) the default is immediate mode: clear the surface, redraw everything every frame. That works for simple games. It fails for UI density — flex rows, text wrap, sticky headers, form focus — unless you rebuild a browser.
A retained scene graph that speaks the web surface: HTML tags, CSS, class names, pointer events. Mutations mark three orthogonal dirty bits; the frame loop recomputes only what must change.
| Changed | Dirty bit | Work |
|---|---|---|
| color / background / opacity | PAINT | Dirty-rect repaint |
| transform | TRANSFORM | World matrix + repaint |
| width / flex / padding … | LAYOUT | Subtree relayout |
HTML/CSS isomorphic, developer-invisible switch:
same JSX + stylesheet, one line between createRoot(canvas) and DOM.
Every feature asks: does the browser do this? does this make zero-rewrite closer?