Widget types reference

All widgets share position (x, y), size (w × h, in grid units), background color, horizontal alignment, bold, and z-order (later widgets draw on top). This page covers what makes each widget type different: what it displays and what it binds to.

Label

Displays a content string, which may include:

• {varId} — inserts the current value of a background variable.
• ${expression} — evaluates an expression using background variables as scope.

Example content: DEX+1: ${DEX + 1}.

A label can optionally bind to a variable to become editable — in Play mode, typing into it writes directly to that variable, which is useful for free-text fields (character name, notes) that don't need a formula.

A label can also attach a dialog.

Checkbox

A single checkbox bound to a boolean variable. Toggling it in Play mode updates that variable directly.

Checkbox toggle pool

A checkbox that spends from a limited resource while also tracking an on/off state — e.g. "Rage: 2 uses remaining, currently active." Binds to two variables:

• A remaining uses number.
• An active state boolean.

Checking it decrements remaining by one (down to a minimum of 0) and sets the state to active; unchecking sets the state to inactive without restoring the use. Once remaining hits 0, the box can still be unchecked but can't be checked again.

Checkbox row pool

A row of checkboxes representing a consumable resource — e.g. spell slots or ki points. Binds to two numeric variables:

• Remaining.
• Max (how many boxes to draw, limited by the widget's size).

Checking a box spends one (remaining decreases); unchecking restores one (remaining increases, up to max). Once remaining hits 0, unchecked boxes are disabled.

Table

Renders the rows of a background table (Data tab → Tables) directly on the page, using a row template built out of ordinary widgets. Binds to:

• A table id.
• An optional filter expression to show only a subset of rows (e.g. only prepared spells).
• An optional auto header toggle to show column names as a header row.

Building the row template

A table widget doesn't have its own row-layout editor. Instead, in Build mode you drop regular widgets — labels, checkboxes, buttons, whatever a row needs — directly on top of the table widget, sized and positioned to fit within its bounds. Any widget fully contained inside the table widget's rectangle becomes part of that table's template; together they define what a single row looks like. (If a widget overlaps two overlapping table widgets, it belongs to whichever table is on top.)

Bind each template widget to a column id exactly as you'd bind it to any background variable — a label's content might be {level}, a checkbox's variable might be prepared, where level and prepared are column ids on the bound table. The template row's height is derived from how far down these widgets extend below the table widget's top edge, not from an even split of the table's height.

How rows get populated

In Play mode, the original template widgets disappear from view and are replaced by one rendered copy per row of table data (per row that passes the filter, if set), stacked vertically. Each copy resolves {colId}/${expression} bindings against that row's own cell values first, plus a _row variable holding the row's 1-based position — a column id takes priority over a global variable of the same name, but a template widget can still bind to an unrelated global variable, which resolves normally (unaffected by the row). Interacting with a rendered row — checking a checkbox, editing an editable label, opening a dialog — writes back into that row's cell, not into any global background variable.

If auto header is on, a header row is rendered above the data using each template widget's bound column id (or a button's label) as its caption.

Edit the underlying rows and columns from the Tables sub-tab in Build mode.

Button

Runs a bound action when clicked in Play mode. Binds to:

• An action id.
• Optional parameter values — literals or expressions — passed to that action's parameters when it runs. This is how the same action can power several differently-labeled buttons (e.g. one action for "activate a form," with each button passing a different form id).

Dialogs

Only label widgets can attach a dialog, opened by clicking/tapping the label in Play mode.

Notes — displays free-form rich-text content. Good for spell descriptions, ability text, or any block of reference text that doesn't need to live directly on the page.

Resource pool — an editor for a resource with an optional max and temporary component (e.g. HP with a max and temporary HP), bound to up to three variables.

Expand — shows the label's own resolved content as plain, scrollable text. Useful when a label's text is too long to fit in its grid cell but you still want the exact same content, just expanded.