Overview
Nokuva's canvas doesn't render screenshots of generated code. It renders the Virtual DOM Protocol directly: a validated VNode tree that the editor can lay out, hit-test, and patch at interactive frame rates.
The hard part is incremental layout. When a model streams a layout patch mid-generation, we can't afford to re-lay-out the whole document. The canvas keeps a dirty-subtree index keyed by node identity, so a patch to one frame invalidates exactly the nodes whose constraints changed — usually a few dozen, not a few thousand.
Hit-testing works on the same tree. Because every node carries its resolved box from the last layout pass, selection, dragging, and the inspect panel read from one shared structure instead of querying a browser. That's what keeps a 5,000-node document responsive on modest hardware.
The Virtual Browser Protocol closes the loop: before a design is handed back to a human, we verify it in the simulated browser and compare resolved boxes against the canvas's own layout. Divergence is a bug, and the diff tells us exactly which node to look at.
The takeaway for anyone building AI-native editors: put the structured representation at the center, and make everything — rendering, editing, verification — a view over it. The protocol spec we build on is published openly if you want to try the same approach.
