Jetpack Compose: Two Trees

← all visualizations

How Jetpack Compose turns bookkeeping into pixels — step through with the arrows or ← → keys. Mirror page: Flutter: Three Trees.

Flutter parallel:

Composition · slot table

flattened record of the last run — pure data

groups array (depth-first)

g0RestartGroup App()
g1Group remember slot: MutableState count
g2Node Column slot: → LN#1
g3RestartGroup Greeting()
g4Node Text("Hi") slot: → LN#2
g5Node Text("$count") slot: → LN#3
⟶
Applier
insert / move / remove
⟶
node pointer
update in place

One real View

render objects with behavior — measure & draw live here

ViewRootImpl
DecorView … ContentFrameLayout

AndroidComposeView (the Owner)

dirtyLN#0 root
owner.root
needsRemeasureLN#1 Column
measurePolicy: Column · NodeChain: [padding]
needsRemeasureLN#2 Text
measurePolicy: TextMeasure · NodeChain: []
needsRemeasureLN#3 Text
measurePolicy: TextMeasure · NodeChain: [drawBehind]
Choreographer→ ViewRootImpl traversal→ onMeasure / onLayout→ dispatchDraw(canvas)→ RenderNode display list→ RenderThread · Skia→ SurfaceFlinger→ pixels
slot table — bookkeeping (data) LayoutNode — render object (behavior) classic Android View pipeline