Data Binding: a better way to design with data

Designers create massive files. Developers hardcode the same data connection in 20 places. Change one thing, and the system breaks. Every update means opening up code, tweaking IDs, and pushing a patch. Designers wait. Engineers guess. Nobody’s happy.

We’ve seen it, we’ve felt it, and we built Data Binding to fix it. It’s our response to a broken loop.  Designers should work with real data, in real time, just like the final experience. 

Think of Data Binding as a contract between engineering and design. Engineers push data to the contract; designers connect their UI to the contract. In the Rive Editor, designers control where data is used and how it’s displayed. Developers use the Rive Runtimes to feed raw data to the contract. Instead of pushing pixels, developers push data.

It’s a more flexible, scalable, and future-proof way to design with real-time data. 

What is Data Binding? 

Data Binding decouples design from development. It was inspired by the best parts of other design tools like Cinema4D and Houdini, but designed for interactive applications at runtime. 

You link a source (your data) to a target (a UI property in Rive).

Think of it like this:

Source: A player’s health in a game. 

Target: A progress bar, character animation, and UI color. 

Result: The bar shrinks, the character limps, and the UI glows red. All are dynamically controlled by the same data. 

Data Binding works with almost any property in Rive: position, scale, rotation, color, animation states, you name it. 

Here are just a few examples: 

• Position, scale, or rotation of a path

• Start and end values of a trim path

• Font size or text field value

• Corner radius of a button

• Gap between elements in a layout

You can also bind one object’s property to another, like using the length of a path to control the size of a font. Then add converters or interpolation to refine behavior for even more control. 

As the data changes, the UI updates instantly. This eliminates the need for hardcoding every UI update. 

What’s new in Rive?

A dedicated Data tab

A new panel in the Rive Editor manages all data bindings in one place. 

Scoped data connections

Data bindings are file-based and scoped to specific artboards or state machines, just like assets in Rive. 

Enums for dropdown menus

Define repeatable options without manually typing values. 

Global data sharing

Bind data across multiple artboards, keeping everything in sync. 

Internal and external connections

Bind to API data at runtime.

How Data Binding fits into MVVM (Model-View-ViewModel)

Developers have long used MVVM to separate data from UI logic. Here’s how it works:

• Model: The raw data layer (e.g., user profiles, game scores). 

• View: The UI layer (your Rive animations, buttons, and visuals). 

• ViewModel: The bridge that translates model data into something the view can use. 

Rive’s Data Binding acts as a built-in ViewModel, letting designers pull structured data into the UI without needing engineers to manually wire up every connection. Designers won’t have to think in backend terms. View Models let them visually map structured data in a design-friendly format. 

How it works in Rive

Step 1: Define your data

Create a View Model in the Rive Editor to structure the data. This acts as the contract between engineering and design. Work with your team to figure out the best way to structure the data.

Step 2: Bind sources to targets

Link data properties to UI elements in Rive (size, color, position, state machines). 

Step 3: Real-time updates

As the data changes, the UI updates. Need to change the data or modify the structure of the file? It’s easy to do without breaking anything. 

Want to structure more complex data? Here’s how you can use nested View Models: 

1. Create a Profile View Model with properties like name, color, and score. 

2. Build a Leaderboard View Model that contains several Profile instances. 

3. Populate multiple components dynamically, like player cards or scoreboards. 

Want to derive data from other data? Use converters like math formulas to combine multiple values. Or text formatters to display colors and numbers as text. Try the time-based converter to get animated interpolated values. 

Why this matters

1. Simplifies state machines: Before, interactions relied on manual triggers and booleans. Now, graphics can react dynamically to live data. 

2. A better designer-dev workflow: Before, engineers had to hardcode data to the structure of the file. Now, designers can continuously iterate on the structure of the file without breaking any data connections. 

3. A single source of truth: One variable can drive multiple UI elements. Change the data once, and everything updates dynamically. 

4. Future-proofing your designs: Even if your UI is simple now, Data Binding ensures it stays scalable and adaptable. 

5. State Machine Listeners: Data Binding also works the other way around. You can use State Machine Listeners to update View Model properties directly from within Rive. That means your graphics can send data back too.

Building the future

We built Data Binding so you can spend less time hardcoding data connections and more time building. Connect your logic, ship your design, and never update a username in 20 places again. This is data-driven design, the Rive way. Ready to try it?