Views

← Documentation
STRVCT

The view layer: auto-generated UI, custom views, and programmatic styling.

The entire view system is built from a small number of composable elements: a node, a tile, a column, and a master-detail split. These four pieces nest recursively — a column of tiles where selecting a tile opens another column — so the same structure that displays a flat list also handles arbitrarily deep, mixed-orientation navigation without any additional wiring.

The view hierarchy wraps DOM elements rather than extending them. This is deliberate: the DOM API is large and mutable, and subclassing it tightly couples framework code to browser internals that change across engines and versions. Wrapping keeps the boundary clean — each layer in the class chain adds exactly one capability (visibility, event listening, gestures, layout, styling), so any layer can be understood, tested, or replaced independently.

SvNode model node with slots, subnodes, annotations Tile renders one node; shows title, subtitle, optional inline editor, selection state, accessibility metadata Column / Stack ordered list of tiles for a node's subnodes, vertical or horizontal per node preference Master-Detail Split column on one side, detail view on the other; selecting a tile opens its node as the next column, composing recursively (Miller-columns-style) Tiles, columns, and splits nest recursively, so a single composition handles arbitrary navigation depth and mixed orientations.

Auto-Generated Views

How the view layer connects to model nodes, synchronizes state, and provides navigation — without writing any view code.

View →

Custom Views

How to create custom view classes when the auto-generated UI doesn't fit.

View →

Programmatic Styling

Named CSS methods, the chainable API, and why STRVCT avoids CSS files.

View →

Themes and Style States

How views resolve their appearance from theme classes, style states, and node configuration.

View →

Responsive

How the view layer adapts the master-detail composition to different viewport sizes without per-screen layout code.

View →