Renderables

Building blocks and composition of UI.

Renderables

Renderables are concrete runtime instances attached to a renderer context. They represent visual elements such as boxes, text and inputs. You create them with their constructors and then attach them to the renderer’s root or to other renderables. Cascade provides built‑in classes like BoxRenderable, TextRenderable and InputRenderable.

Renderables form a tree. Use the add method to append a child and remove to detach it. Layout properties such as width, height, flexGrow and padding work similarly to flexbox, allowing nested and responsive layouts. Renderables can receive focus and handle keyboard and mouse events.

import { BoxRenderable, TextRenderable } from "@cascadetui/core"

const panel = new BoxRenderable(renderer, { width: 40, border: true, padding: 1 })
panel.add(new TextRenderable(renderer, { content: "Runtime instance" }))
renderer.root.add(panel)

Because renderables are runtime objects, you can update them in place: change content, toggle visibility, or swap children. This is a good fit for dashboards, log viewers, or any UI that updates frequently.

const status = new TextRenderable(renderer, { content: "Starting..." })
panel.add(status)

setInterval(() => {
  status.content = `Tick: ${Date.now()}`
}, 250)

Interactive renderables support event handlers. For example, an input can invoke a callback when the value changes or when the user submits.

import { InputRenderable } from "@cascadetui/core"

const input = new InputRenderable(renderer, {
  placeholder: "Enter name",
  onSubmit: (value) => console.log(value),
})
renderer.root.add(input)

Detach elements by id when you no longer need them, or when switching screens.

renderer.root.remove(panel.id)
panel.destroyRecursively()

Tree APIs

Operation	Where	Notes
`add(child)`	Container renderables	Appends a child node to the renderable tree.
`remove(id)`	Container renderables	Detaches a child by id (does not necessarily destroy it).
`clear()`	`BoxRenderable`	Removes all children and destroys their subtrees (useful for screen swaps and benchmarks).
`destroyRecursively()`	Any renderable	Destroys a subtree; use when switching screens to avoid leaks.
`renderer.root.getRenderable(id)`	Root	Lookup by stable id (useful for focus management and imperative updates).