Nuxie/Docs
Studio

Variables & Bindings

Create variables and bind them to components

Variables & Bindings

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

ConceptPurpose
CollectionGroups related variables (for example, paywall, theme, copy).
ModeA named value set inside a collection (for example, default, experiment-a).
VariableA typed value (string, number, boolean, color).
AliasMakes one variable reference another variable of the same type.
Screen mode overrideSelects which mode a screen should use per collection.

Creating variables

  1. Open the Variables tab in the left sidebar.
  2. Create a collection.
  3. Add modes to the collection.
  4. Add variables and set a value per mode.

Supported variable types in v1:

  • string
  • number
  • boolean
  • color

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.title
  • vars.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