Rendering pipeline

Overview

SootSim uses a custom React reconciler that creates SootSimNode objects instead of DOM elements. These nodes are laid out with Yoga and rendered to a <canvas> via CanvasKit (Skia WASM).

Reconciler

The reconciler (engine/reconciler.ts) implements the react-reconciler host config:

• createInstance() — creates a SootSimNode with style resolution
• appendChildToContainer() — adds to the root node
• commitUpdate() — diffs props and updates the node
• removeChild() — removes from parent

Node tree

Each SootSimNode stores:

• resolved styles (RN style objects → flat properties)
• Yoga layout node reference
• children array
• absolute position (computed after layout)
• accessibility metadata

Layout

Yoga computes flexbox layout in a single pass. SootSim maps RN style props to Yoga node properties:

• flex, flexDirection, alignItems, justifyContent
• padding, margin, border
• width, height, minWidth, maxWidth
• position (absolute/relative), top/left/right/bottom

Canvas rendering

The CanvasKit renderer traverses the node tree depth-first:

1. apply clipping (overflow: hidden, border radius)
2. draw background color
3. draw borders
4. draw shadows
5. draw text (with font metrics)
6. draw images
7. recurse into children
8. draw scroll indicators and fade gradients