Adding & arranging widgets

Widgets are the pieces you drop on a page. This chapter covers placing them, moving and nesting them in the tree, and configuring them through the schema-driven properties panel.

Place a widget

1. Open the Add-widget menu — Right-click a page or a container in the widget tree and open Add Widget. Built-in widgets are listed first; your reusable Components and any custom widgets follow, each grouped by its category. (Once a project has custom types, the built-ins move into their own Built-in sub-menu to keep the list short.)
2. Pick a type — Choose the widget — say Button or Icon. It's inserted into the tree at the point you clicked and selected for you.
3. Position it in the tree — Use Move up / Move down or drag the row to set stacking order, and drop it inside a Container to nest it.
4. Configure it on the right — The properties panel now lists exactly the fields this widget declares. Fill them in — many can be bound to live data instead of typed literally.

Schema-driven properties

Every widget declares a schema — the list of fields it exposes and the type of each. The panel renders the correct editor per field, so you never type a color into a text box:

• a color field opens a color picker (with theme-token support),
• an icon field opens the icon picker, an image field the asset picker,
• a select shows a dropdown of allowed values,
• a struct field (like a Button's bound variable) exposes its members to bind individually.

Most fields also carry a small source pill — that's where a static value becomes a live binding. Full detail in Dynamic properties.

Make controls do something: actions

Interactive widgets (Button, Menu Toggle) have an actions field. An action is what runs when the control is triggered:

• Navigate — Go to another page or dialog in the tree.
• Write a variable — Push a value to a writable tag — set a coil, a mode, a setpoint.
• Call the backend — Run an async action, with onSuccess / onFailed / onSettled handlers that can read the $result.