Every glyph view goes through two distinct phases. Build happens once when you call SetView() — the declarative tree is compiled into a flat array of operations via reflection and type switches. Execute happens every frame — it walks the compiled ops and dereferences pointers to read current state. No tree rebuilds, no diffing, no allocation in steady state.

The composable API surface — VBox.Gap(2).Border(BorderRounded) — is purely a build-time convenience. At runtime, the template is just a flat array walk with pointer reads. Values exist in three variants: static (embedded literal), pointer (dereferenced each frame), and offset (ForEach element base + unsafe.Pointer arithmetic).

Rendering is a four-phase pipeline that runs on every frame, designed for terminal workloads. Each phase operates directly on flat Op and Geom arrays — no tree rebuilds, no node allocation. Components outside the viewport are culled before rendering, and the final flush diffs against the previous frame to emit only the cells that actually changed.

Flex grow is a separate phase because it needs the parent's final size, which flows top-down from the screen dimensions. layout() runs once, saves each node's natural size, and flex grow distributes the remaining space without re-running layout.

The spatial properties that control how components are sized and positioned.

Margin is outside the border — the space between this component and its siblings. Border wraps the content area. Gap is the spacing a container inserts between its children.

Grow controls how remaining space is distributed after fixed-size children are measured. Without Grow(), a component takes exactly its content size. With it, the component expands into whatever space is left over. The number you pass is a ratio, not a pixel value.

One child with Grow(1) — it gets all the remaining space:

Two children with equal Grow(1) — they split the remaining space 50/50:

Unequal ratios — Grow(1) vs Grow(2) — the space is split proportionally. Grow(2) gets twice as much of the remaining space as Grow(1):

The number doesn't mean anything on its own — Grow(1) and Grow(1) is the same split as Grow(100) and Grow(100). It's the ratio between siblings that matters. Think of it as "parts of the remaining pie."

FitContent() is the inverse — it tells a container to shrink to its children's measured size instead of filling available space. WidthPct(0.5) sets width as a fraction of the parent. Size(w, h) sets both dimensions explicitly.

There's no reactivity in glyph. No subscriptions, no change detection. When the framework renders, it dereferences your pointers and reads whatever value is there right now. That's it.

Pass a *string and the text updates when the string changes. Pass a string literal and it's static forever. Same pattern for *int, *bool, *[]T — anything behind a pointer is live, anything without one is baked in at compile time.

There's no state diffing, no change detection. You mutate your variables directly, and the next render reads current values through pointers. Renders happen when you return from a key handler, or when you call RequestRender() from a goroutine. That's the whole model.

Because there is no propagation mechanism, problems like render thrashing, cascading updates, and stale intermediate states do not apply. Nothing stops you building reactive patterns on top - an observer that calls RequestRender() when a channel fires is a few lines of code. glyph just doesn't ship that complexity by default.

ForEach, If, and Switch each compile to exactly one Op in the parent's flat array. Their content lives in separate sub-templates — self-contained *Template instances with their own ops, geom, and byDepth arrays. From the parent's perspective, they're opaque single-slot ops.

ForEach is the most interesting. The render function is called once at compile time against a dummy element. Any pointers into that dummy get converted to offset-based ops via unsafe.Pointer arithmetic — the offset from the element base address to the field pointer is stored instead of the pointer itself.

If compiles both branches into separate sub-templates at build time. At runtime the condition is evaluated and only the active branch is laid out and rendered. The inactive branch costs nothing — it's not even visited.

Switch creates N+1 sub-templates (one per case + default). getMatchIndex() linear-scans to find the matching case. Only the winner is laid out.

None of these participate in the parent's byDepth layout pass directly. They're measured inline by their parent container when it encounters them during the child scan in layoutContainer. The sub-templates run their own complete layout pipeline internally — distributeWidths + layout — but this is scoped to the sub-template's own ops array, not the parent's.

Input is managed by riffkey, a router stack that supports vim-style multi-key sequences, modal layers, and count prefixes. Components declare their bindings as data via BindNav(), BindToggle(), etc. — these are wired at compile time, not at runtime.

A keypress follows this path:

The router stack enables modal input. Push a new router for a dialog; it captures all keys. Pop it when done — the previous context resumes exactly where it was. Each named view gets its own router, swapped atomically by Go().

Jump labels bring vim-easymotion to the TUI. Press a trigger key and every jump target in the view gets a short label overlay. Type the label and the target's callback fires. Any component can be a target.

Wrap any component with Jump() to make it a target. The framework handles label assignment and positioning during the render pass.

app.SetJumpStyle() controls how labels look. For dynamic targets that aren't wrapped with Jump(), use app.AddJumpTarget() with coordinates, a callback, and a style during a render callback.

Applications with multiple screens use named views. Each view has its own compiled template and its own riffkey router — switching views swaps both atomically. The compiled template and key handlers swap atomically.

For overlays and dialogs, PushView() layers a modal on top of the current view. The modal's handlers take precedence. PopView() peels it off — the previous view and its input context resume immediately.

When content is taller than the viewport, Layer provides a pre-rendered off-screen buffer with scroll management. Content is rendered into the full-size buffer once, then the visible portion is blitted to the screen each frame. The layer only re-renders when the viewport width changes.

LogC extends Layer by reading lines from an io.Reader in the background. Auto-scroll follows new content by default. FilterLogC adds live fzf-style filtering on top. Both re-render lazily — only when content changes or the viewport width changes.