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:

• Click an empty spot on the page to drop the Add Widget marker there, then add a widget at that cell.
• Widgets snap to the grid — position (x, y) and size (width × height) are always whole grid units.
• Drag a widget's body to move it; drag the handle on its bottom-right corner to resize it. The resize handle appears on a single selected widget.
• 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.

Styling

Every widget has these style properties in 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.

Label widgets add a Bold toggle for their text.

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 label is for text and can reference variables directly via {varId} / ${expression} interpolation. Binding it to a variable instead makes it show that variable's value on its own, in place of its content.
• 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 using a row of other widgets as the template.
• A button binds to an action and can pass parameters to it.

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.

Editable labels

A label also has an Editable in Play Mode toggle, which turns it into a field you can type into at the table. What your typing changes depends on whether the label is bound: a bound label writes back to its variable, an unbound one edits its own content.

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.

A label uses its click for one thing at a time: if it's editable, clicking starts editing rather than opening the dialog, so keep those two on separate widgets.