Constructs

Constructs

Constructs provide a declarative API for building UI hierarchies. Functions like Box, Text and Input return virtual nodes (VNodes). These VNodes describe the tree structure and properties without immediately allocating runtime instances. The VNodes are turned into renderables later via instantiate.

Constructs encourage composition. You can nest them to build complex layouts, and you can encapsulate behaviour with factories. The delegate helper forwards focus and events to a child component, enabling form‑like patterns.

import { Box, Text, Input, instantiate, delegate } from "@cascadetui/core"
 
const form = delegate(
  { focus: "username" },
  Box(
    { border: true, padding: 1 },
    Text({ content: "Login" }),
    Input({ id: "username", placeholder: "user" }),
  ),
)
 
const node = instantiate(renderer, form)
renderer.root.add(node)

Because constructs are plain functions, it’s easy to build reusable UI factories that accept options and return a VNode. This is also a good place to standardize styling (padding, borders, colors) across your application.

You can build custom constructs as pure functions that return a VNode, enabling reuse across your application.

import { Box, Text } from "@cascadetui/core"
 
function Card(title: string, content: string) {
  return Box(
    { border: true, padding: 1, flexGrow: 1 },
    Text({ content: title }),
    Text({ content }),
  )
}
 
const app = Box({ flexDirection: "row" }, Card("A", "First"), Card("B", "Second"))

Constructs also make conditional rendering straightforward. You can return different trees based on state, then instantiate the result.

import { Box, Text } from "@cascadetui/core"

function EmptyState(message: string) {
  return Box({ border: true, padding: 1 }, Text({ content: message }))
}

const vnode = items.length === 0 ? EmptyState("No results") : Box({}, Text({ content: "Results..." }))

Reference (core helpers)