Data & Bindings

Define view models and bind dynamic data to components

Data & Bindings

Connect components to dynamic data so screens adapt to each user. Define view models with typed properties, create instances with sample values, and bind component fields to data.

Why view models matter

A view model is a typed data contract between your screen design and the values that power it. Instead of hardcoding text like "Unlock Premium" into a screen, you bind the component to a view model property called title. At runtime, the SDK injects the real value -- which could come from your server, a campaign configuration, or user attributes.

This separation means:

• Designers iterate on layout without breaking data connections.
• Developers control what data is available without touching the design.
• The same screen design works with different data for different users.

Core concepts

Creating a view model

Open the Data tab in the left sidebar and click the add button next to View Models.

1. Name the view model (e.g., paywall or onboarding). Names must be valid identifiers -- letters, numbers, and underscores.
2. Add properties. Each property has a name and a type:

You can create multiple view models per flow. They are shared across all screens.

View model instances

An instance holds actual values for a view model's properties. Use instances to see how your screen looks with real content.

To create an instance:

1. Select a view model in the Data panel.
2. In the right sidebar, click Add Instance.
3. Fill in values for each property.

You can create multiple instances per view model -- for example, a "Monthly plan" instance and an "Annual plan" instance. Instances are defined at the flow level and shared across screens.

Binding components to data

Bindings connect view model properties to component props. In Nuxie, bindings are declared in JSX expressions rather than a separate binding panel.

Read bindings

Read bindings display a view model value in a component:

<Text>{vm.title}</Text>
<Image src={vm.heroImage} />
<Button disabled={vm.isLoading}>Subscribe</Button>

The vm prefix refers to the screen's default view model instance. You can also access view models by name or index:

<Text>{vmsByName.paywall.default.title}</Text>
<Text>{vms[0].default.price}</Text>

Write bindings (input components)

Input components bind user input back to the view model:

<TextInput value={vm.firstName} onChangeText={vm.firstName} />
<Toggle value={vm.optIn} onValueChange={vm.optIn} />

When the user types or toggles, the view model property updates and any other components bound to the same property re-render.

Supported input components:

• TextInput / TextArea -- onChangeText (string)
• Toggle / Switch -- onValueChange (boolean)
• SingleChoice -- onValueChange (string/enum)
• MultiChoice -- onValueChange (string array)
• DatePicker -- onDateChange (ISO date string)

List rendering

Render a list of items using .map() on a list property:

<View>
  {vm.products.map((product) => (
    <View className="rounded-2xl p-4">
      <Text>{product.name}</Text>
      <Text>{product.price}</Text>
    </View>
  ))}
</View>

Inside the map body, the alias (product) is relative to the list item's view model. To access the parent screen's view model from inside a list, use vmsByName or vms.

Converters

Converters transform a bound value before it reaches the component. They are declarative -- no custom code.

Apply a converter in JSX with the conv() function:

<Text>{conv("format_price", vm.price)}</Text>
<Button disabled={conv("is_empty", vm.name)}>Continue</Button>

Available converter types

Converters are defined at the flow level and referenced by ID. Create them from the Data panel in the left sidebar.

Screen defaults

Each screen can declare which view model and which instance to use by default. This controls two things:

1. Editor preview -- The screen renders using the default instance's values so you see realistic content while designing.
2. Runtime fallback -- If no instance is injected at runtime, the default is used.

Set screen defaults by selecting a screen, then clicking Edit defaults in the right sidebar. This opens the Data inspector where you choose a view model and instance.

Default resolution order

If a screen does not explicitly set a default view model, Nuxie falls back to the first view model in the flow. If no instance is set, it falls back to the first instance for that view model, or creates a blank instance from the schema.

The Data panel

The Data tab in the left sidebar is your navigation hub for all data entities:

• Screen Defaults -- Shown when a screen is selected. Click to edit the default view model and instance.
• View Models -- Expand to see properties. Click a property to inspect and edit its type and configuration.
• Converters -- Click to edit converter type and settings.

Selecting any data item opens the Data inspector in the right sidebar for detailed editing.

Next steps

• Interactions -- Use view model values in interaction actions like set_view_model and send_event.
• Components & Styling -- Edit the components that bindings connect to.
• Publishing -- Learn how binding validation affects publish readiness.