Editor binding reference

Template layers can use mustache expressions and variable paths in many fields (text, colors, images, loop sources, conditions, and more). Values are evaluated in a sandbox: only the variables in scope and the allowed functions listed below are available—no arbitrary JavaScript.

Binding syntax

• Expressions are written as {{ … }} when the field expects a evaluated result (e.g. {{ brand.colors.primary }}, {{ min(padding, 24) }}).
• Variable paths use dot notation: page.width, brand.logos.logo, myVar.nested.key.
• Merge order when the same name exists at multiple levels: variables are combined from global (space) → template → page. A value defined on the page wins over template, which wins over global.

Built-in scopes and objects

Scopes

Think of three layers of key/value data that are merged for lookups:

If you set ctaLabel on the page and also on the template, page wins. Use that to keep brand-wide defaults in globals, template-level defaults on the template, and one-off copy on the page.

Objects

These are common top-level objects exposed in expressions (when the page or brand is configured):

Example: {{ $_page.width }} for canvas width, {{ use(brand.logos.logoDark, brand.logos.logo, brand.logos.icon) }} for a safe logo URL.

Loops (repeater)

The Loop / Repeater source must resolve to either an array (iterate in order) or an object (iterate entries). It can be supplied as:

1. A variable path that points to an array/object, e.g. items.products.
2. A bare helper call (no {{ }} wrapping the whole field), e.g. range(7), monthDayNumbers(year, month).
3. A single mustache expression that evaluates to an array/object, e.g. {{ monthDayNumbers(year, month) }}.

Resolution rule: if the path resolves to a non-null value, that value is used as the collection; otherwise the engine may evaluate the field as an expression.

Let <as> be the item variable name you set in the editor (default mental model: item).

Examples: if Item variable is row, use row, rowIndex, and for objects rowKey. If it is slot in a calendar grid, use slot and slotIndex to bind text or visibility per cell.

Note: Putting {{ }} in a normal text field produces a string. Arrays stringify as comma-separated values, which is rarely what you want for layout—use a repeater layer and bind children to row, rowIndex, etc.

How the repeater layer fits in the tree

The layer that has Loop / Repeater set is not the outer frame around the whole list. At render time that layer is duplicated once per collection item, and each copy is placed as a sibling under that layer’s actual parent in the document. Layout that depends on multiple items at once (e.g. flexWrap for a grid of day cells, row-wide alignment) belongs on a non-repeating parent group above the repeater; per-cell or per-row styling belongs on the repeat layer or its children.

Parent layer

Child layers can read the immediate parent layer node only (not the parent’s children tree):

Use this to align or style a child based on the parent’s identity or props without duplicating data.

Expression helpers

Only the functions below are allowed inside {{ … }} (and in loop sources where documented). Arguments are coerced as needed; invalid inputs often yield empty string, empty array, 0, or a safe fallback as noted.

Core

Array reducers (sums, joins)

For invoice-style totals and joined lists, use sumItems / joinItems to reduce a repeater’s source to a single value. Both accept the same array you would pass to loop.source (typically a dot path like details.items).

{{ sumItems(details.items, 'price.new') }}
{{ round(sumItems(details.items, 'price.new') * 1.1) }}
{{ joinItems(speakers, 'name', ' • ') }}
{{ joinItems(tags) }}

Number parsing (currency / formatted strings)

When prices and amounts are stored as formatted strings, convert them with toNumber (alias parseNumber) before doing math. sumItems applies the same normalization internally, so reach for toNumber when you need a single value.

{{ toNumber('$1,234.50') }}                       // 1234.5
{{ toNumber(invoice.subtotal) * 1.1 }}            // works even if subtotal is "$199.99"
{{ toNumber(invoice.discount, 0) }}               // safe 0 default when blank
{{ round(toNumber(price.new) - toNumber(price.discount)) }}
{{ parseNumber('(1,200)') }}                      // -1200 (accounting style)

Strings using , as the decimal mark ("1.234,56") are not auto-converted — that pattern is ambiguous against the en-US thousands convention. Normalize on input first.

Calendar and loop arrays

Month is always 1–12. Date math uses UTC. Array-producing helpers cap very large ranges internally (guardrail for templates).

Color

All color inputs accept strings ("#rgb", "#rrggbb", "rgb(...)", etc.) or, for some APIs, a number interpreted as a hex RGB integer. On errors, functions fall back to the input color string, #888888, or #ffffff as implemented.

For more examples of use / isDefined and brand paths, see Template expressions.