CanvasKit plus Yoga make browser review useful for real UI fidelity instead of a DOM approximation.
+Catch spacing, blur, shadows, radii, and transform regressions early.
+Review the same native-looking screen before a device build exists.
Why it matters
Design and engineering can review the same native surface much earlier.
SootSim is a pure-web iOS simulator simulator with a complete React Native runtime — shell, runtime, and libraries — alongside a tools for inspection, debugging, agents, tests, and CI.
WebGL + DOM
soot runs two live preview surfaces at once. the web preview uses a DOM iframe. the native preview uses a second iframe and renders through sootsim to a single <canvas>. both previews are connected to the same local browser-hosted data stack.
+web preview: DOM via react-dom
+native preview: canvas via CanvasKit
+per-project data stack: PGlite + zero-cache in browser workers
native preview shell
the native preview shell sets up a CJS registry, loads sootsim and its native dependencies, waits for a bundle over postMessage, executes the bundle via new Function(code), resolves the app export, and calls renderApp(AppComponent).
+shell file: public/__app-native-live.html
+bridge file: public/sync-ws-patch.js
+module format in native preview: CJS, not ESM blob URLs
render pipeline
the core render path in the architecture docs is: React components → custom reconciler → SootSimNode tree → Yoga layout → CanvasKit renderer. there are no DOM elements for the actual rendered app surface.
+reconciler: engine/reconciler.ts
+layout: engine/yoga-layout.ts
+rendering: engine/canvaskit-renderer.ts
layout and rendering
Yoga computes layout with the React Native flexbox model. CanvasKit then draws backgrounds, borders, shadows, text, images, and deferred portal content directly to the canvas. text measurement uses CanvasKit paragraph APIs.
+point scale factor follows device pixel ratio
+portal content is deferred and drawn on top
+rendered output is canvas, not mapped DOM nodes
interaction and motion
sootsim carries its own interaction stack. hit testing, responder negotiation, scroll physics, and animation drivers are engine concerns, not borrowed from the browser DOM event model.
+transform-aware hit testing with pointerEvents support
+scroll physics in engine/scroll.ts
+animation drivers in engine/animated.ts
+gesture handling under engine/touch/ and engine/hit-test.ts
inspection and agent access
because the visible UI is canvas, sootsim maintains a hidden accessibility overlay that mirrors the canvas tree as DOM. that overlay is the basis for screen readers, AI tool interaction, and the test bridge globals exposed on window.
+agent mode adds interactive DOM proxies over the canvas surface
current scope
the sootsim README positions the package as a complete React Native engine that runs in the browser, with component coverage, iOS simulation chrome, library compatibility work, and a test bridge for inspection and automation.