Widgets

Widgets are the visible building blocks on a page — labels, checkboxes, tables, buttons. Everything you see on a sheet page is a widget placed on that page's grid.

For the full list of widget types and exactly what each one binds to, see the widget types reference. This page covers the workflow of placing, styling, and binding a widget.

Placing and editing widgets

In Build mode:

• Add a widget from the toolbar/menu, then drag it into place on the grid.
• Widgets snap to the grid — position (x, y) and size (width × height) are always whole grid units.
• Drag a widget's edge or corner handle to resize it; drag its body to move it.
• Widgets can overlap; the most recently created widget draws on top.
• Select a widget to open the Inspector, a side panel where you edit everything about that widget — content, styling, and bindings.

All of this is undoable — a full undo/redo history covers layout and data edits, and multi-step operations like a drag collapse into a single undo step.

Styling

Every widget shares a few style properties, editable from the Inspector:

• Background color — a literal CSS color, or an expression that reacts to background data (e.g. turning red when HP drops to 0).
• Horizontal alignment — left, center, or right. Vertical alignment and font size are automatic: text scales with the widget's height in grid units, so there's no manual font-size control.
• Bold.

Styling is purely visual and locked to editing in Build mode — it never affects formulas or values.

Binding widgets to data

Most widget types bind to one or more background data variables (see Background data & formulas):

• A checkbox binds to a single boolean variable.
• A checkbox toggle pool and checkbox row pool bind to a pair of variables that track a resource (e.g. remaining spell slots).
• A table widget binds to a background table and renders its rows.
• A button binds to an action and can pass parameters to it.
• A label's text can reference variables directly via {varId} / ${expression} interpolation, and can optionally bind to a variable to make it editable in Play mode.

Set the binding from the Inspector once the target variable, table, or action already exists in the Data tab — create the data first, then bind widgets to it.

Dialogs

Label widgets can attach a dialog — a popup triggered by clicking/tapping the label in Play mode, used for content that doesn't fit in the widget itself (spell descriptions, a detailed resource editor, or just the label's full text). See the widget types reference for the available dialog types.