Structure

Apps and pages

An app contains pages. A page connects a route to an element tree.

Elements

An element is a node. Its kind selects a registry primitive or a component. Its children form a subtree.

Page
└── Element
    ├── Kind
    ├── Props
    ├── Styles
    └── Children

Layout and styling

Layout arranges elements. Styles control spacing, color, typography, and appearance.

Responsive layouts

Apply styles at Base, SM, MD, LG, XL, and 2XL breakpoints.

Components and instances

A component is a reusable tree of elements. Its interface declares the props it accepts. Each instance supplies its own values.

Inside the component, {{props.title}} reads its title prop.

Repeat

Repeat maps an array onto copies of a subtree.

• {{repeat.item}} — current item.
• {{repeat.index}} — position.
• {{repeat.key}} — instance identity.

Conditional rendering

renderIf controls whether a subtree exists. A falsy result omits the element and its children.