Variables & Bindings
Create variables and bind them to components
Use the Variables tab to define reusable values for your screens, then bind those values in JSX.
Why variables
Variables let design and runtime data stay decoupled:
- Designers can iterate without hardcoding copy and prices.
- Teams can swap values by mode (for example, default vs. promo) without rebuilding layouts.
- The same screen can render with different values across screens and contexts.
Core concepts
| Concept | Purpose |
|---|---|
| Collection | Groups related variables (for example, paywall, theme, copy). |
| Mode | A named value set inside a collection (for example, default, experiment-a). |
| Variable | A typed value (string, number, boolean, color). |
| Alias | Makes one variable reference another variable of the same type. |
| Screen mode override | Selects which mode a screen should use per collection. |
Creating variables
- Open the Variables tab in the left sidebar.
- Create a collection.
- Add modes to the collection.
- Add variables and set a value per mode.
Supported variable types in v1:
stringnumberbooleancolor
Aliases
A variable value can be:
- a literal value, or
- an alias to another variable (same type only).
Alias cycles are blocked, so A -> B -> A is invalid.
Screen-level mode overrides
Each screen can override active modes by collection. This is stored per artboard and lets one screen use promo while another uses default.
Binding paths
In hooks v2, variable reads use the vars.* surface.
Example paths:
vars.paywall.titlevars.paywall.primary_price
Variable writes use action constructors:
setVar("vars.paywall.title", "New title")
Capabilities + Variables
Capabilities are now the canonical authoring surface for screen behaviors (for example, paywall). Variables handle reusable values; capabilities handle behavior-specific config.
Next steps
- Interactions – Trigger behavior changes and events.
- Components & Styling – Apply bound values to UI.
- Publishing – Validate before shipping.