Hi! I'm Mayte CG, a Rive Ambassador and experienced independent designer. With Rive, I can design interactivity firsthand, gaining complete creative control without needing to code. Today, I'm here to discuss a feature that takes this capability even further.
Imagine your design values — positions, colors, scales — as live signals that can react or trigger changes in real-time. That’s what Data Binding unlocks: developer-level control to build flexible, interactive logic right inside the Editor.
Even if you're not coding, some concepts can feel like programming and, yeah, a bit intimidating. I’ve been there. But with some play and exploration, it clicks. And the payoff? Real creative power.
This guide is your go-to — a designer-to-designer walkthrough to help you bind data with ease. It’s also the first in a three-part series. In this first part, we’ll focus on building a clear mental model of how Data Binding works to make it feel intuitive. I’ll also share some learning tips. In the next article, we’ll put theory into practice with hands-on mini-examples you can try right away. Finally, we’ll explore creative ideas and playful use cases to inspire your own projects.
The building blocks
Think of Data Binding as if you’re building a control panel with knobs, displays, and indicators, all driven by data.
Let's break down the key components:
View Model: Your blueprint
View Models are the schematic that lays out the data structure. They define which properties you’ll use and how they relate to one another.
💡 Quick tips:
Always link your artboard to the View Model. A common beginner mistake (guilty!) is hitting Play and… seeing nothing. When that happens, it’s usually just a missing connection. No View Model? No data!
View Model Properties: Your controls
Think of Properties as the specific knobs and dials in your panel, each controlling a particular data type like numbers, strings, colors, etc.
💡 Quick tips:
Start simple: Try intuitive properties like Number or Color first, then explore combinations for more complex logic.
Defining properties is a thinking step. I’ve found that asking, “What data do I really need?” gets my logic gears turning. If something doesn’t work, rethink the setup. Sometimes, a few extra Properties make all the difference.
Binding: Your wiring
Binding is where the magic happens. You’re connecting your data (Properties) to other design values, making everything ready to respond just the way you planned.
💡 Quick Tips:
Bound values only show live when you press Play in the State Machine. If you're in Early Access, use the toggle next to the Export button to preview data in Design mode.
Watch out when binding Number Properties! For example, if "price" is 13 and "quantity" is 2, a multiplication formula won’t update those fields to show 2 and 13. But the hover tooltips will remind you what's bound!
Converters: Your cable adapters
Converters act as signal translators, transforming data from one format to another. Need to convert a number to a string or multiply a value? This is the way.
💡 Quick Tips:
Use Group Converters to chain multiple converters in one box, keeping your logic organized.
Start simple: The Formula converter looks complex. I felt the same at first. But with some trial and error, it starts to make sense. Starting with easy functions like Random really helps.
View Model Instances: Your working panels
Think of Instances as live versions of your blueprint, each with unique property values. For example, you might have a ProductCard Model including properties such as “product name,” “rating,” “price,” and “description.” You can then create different Instances for each type of product.
💡 Quick tips:
Instances are like filled-in templates: Use them to quickly create multiple designs from a single shared setup.
Mark instances as Exported when generating a Share Link or if devs need access.
View Model Nesting: Your modular setup
Nesting lets you embed View Model Instances within other View Models as a Property, like adding mini control panels into a big one. It’s perfect for creating modular designs using existing components.
💡 Quick tips:
Nesting + Instances = fast, reusable setups: For example, reuse an “item card” across a video game inventory screen.
Link nested artboards: Don’t forget to link nested artboards to their View Model in Data Bind > Model.
Data Binding + State Machine: Your CPU
The State Machine is the brain of any Rive project, and with Data Binding, it’s smarter than ever! It can now respond to data or update the View Model based on user input or defined logic.
💡 Quick Tips:
Properties aren't just for binding to editor elements! You can also use them as conditions in the State Machine, chain them with converters, or trigger View Model changes through listeners and events.
The State Machine UI has been updated: most logic setup now happens in the bottom panel instead of the right side. If you haven’t used Rive in a while, check out the updates!
Property Groups: Your mini utility circuits
When setting up Data Binding, sometimes you might need an intermediary to pass values or manage Property changes. That’s where Property Groups come in handy!
💡 Quick Tips:
Want to animate a View Model property? First, add a property (Number, String, or Boolean) to a Property Group. Then, bind it to your View Model property as Target to Source. Now, you can keyframe the Property Group’s property, and the View Model will follow.
You can find Property Groups under Stage Control Tools, next to Events and Joysticks, not in the Data panel.
Enums: Your mode selectors
Enums work like mode switches, giving you clear, named labels to control states. No more guessing what "1" or "2" means in a State Machine condition. Use intuitive options like “success” or “fail” instead.
💡 Quick Tips:
Enums make your logic easier to follow for both your dev teammates and yourself.
There are two types: system Enums (like “layout direction” or “layout alignment”) and custom Enums that you create for your own use cases.
Lists: Your auto-wired modules
Lists let you easily repeat visual components (like buttons, cards, or rows) based on your data. Instead of building each one manually, Rive does the work for you. Each item gets its own data, making it easy to build flexible UIs that grow (or shrink) with your content.
💡 Quick Tips:
Design your list item inside a nested artboard, then connect your List View Model to replicate it with dynamic data.
Populating your list with a Number? You’ll need a Number to List converter to make it work.
One last note: Naming
Everything in Rive’s Data Binding stays flexible. Even after setup, you can control it all at runtime. That’s the magic: no-code or full-code, your choice.
Still, one habit makes a huge difference no matter your path: clear naming. A property like maxNumber or a View Model called InventorySystem tells you exactly what it does and saves you from second-guessing later.
Mindsets for mastering Data Binding
Use visual metaphors. As designers, we often learn best through images. Representing abstract technical concepts visually can make them easier to grasp
Build ugly, learn fast. Start scrappy: gray boxes and simple logic. Focus on mastering Binding first; polish can come later.
Explain what you learn. Teaching others, whether in person, sharing content, or even by taking notes for yourself, helps strengthen your own understanding
Everyone’s learning path is unique. Don’t measure yourself against tutorials or perfect demos. Exploration > perfection.
Combine your Rive skills. Use layouts, bones, constraints, etc., with Data Binding to unlock new creative uses and stay motivated.
New to Rive? Get comfortable with the basics before jumping into Data Binding.
Learn like a developer: Research, remix, and level up
One developer skill I really admire, and that really comes into play here, is the ability to dig into docs and research to solve new problems:
Borrow from programming concepts: Many Data Binding ideas (bindings, enums, converters) mirror real code. Look them up if you’re stuck. You’ll still need to translate them to Rive, but they can give you helpful hints and context.
“Vibe Binding”? Why not? AI helpers like ChatGPT won’t provide Rive-specific Data Binding answers (yet), but they can explain logic and math and spark aha moments. Just remember to ask why, not just how. For me, learning to think like a developer means looking for intent, not just instructions.
That includes math. Features like the Formula Converter involve math operators. Don’t let that block you: break it down, Google it, use AI, ask. Curiosity beats being a “math person.” Letting go of that belief has been pivotal in my own learning.
Reverse-engineer files: Open Marketplace files, explore how things are wired, and try variations. Learning by tweaking is faster than just reading the manual!
Bind beyond
As the pieces connect, Data Binding shifts from wiring to creating. So keep exploring. Try weird things. Break stuff. Fix it. Remix it. The more you play, the easier it gets.
Need backup on your journey? Check out Rive’s documentation, learn with the 101 Data Binding tutorials, and tap into the Community.
Hi! I'm Mayte CG, a Rive Ambassador and experienced independent designer. With Rive, I can design interactivity firsthand, gaining complete creative control without needing to code. Today, I'm here to discuss a feature that takes this capability even further.
Imagine your design values — positions, colors, scales — as live signals that can react or trigger changes in real-time. That’s what Data Binding unlocks: developer-level control to build flexible, interactive logic right inside the Editor.
Even if you're not coding, some concepts can feel like programming and, yeah, a bit intimidating. I’ve been there. But with some play and exploration, it clicks. And the payoff? Real creative power.
This guide is your go-to — a designer-to-designer walkthrough to help you bind data with ease. It’s also the first in a three-part series. In this first part, we’ll focus on building a clear mental model of how Data Binding works to make it feel intuitive. I’ll also share some learning tips. In the next article, we’ll put theory into practice with hands-on mini-examples you can try right away. Finally, we’ll explore creative ideas and playful use cases to inspire your own projects.
The building blocks
Think of Data Binding as if you’re building a control panel with knobs, displays, and indicators, all driven by data.
Let's break down the key components:
View Model: Your blueprint
View Models are the schematic that lays out the data structure. They define which properties you’ll use and how they relate to one another.
💡 Quick tips:
Always link your artboard to the View Model. A common beginner mistake (guilty!) is hitting Play and… seeing nothing. When that happens, it’s usually just a missing connection. No View Model? No data!
View Model Properties: Your controls
Think of Properties as the specific knobs and dials in your panel, each controlling a particular data type like numbers, strings, colors, etc.
💡 Quick tips:
Start simple: Try intuitive properties like Number or Color first, then explore combinations for more complex logic.
Defining properties is a thinking step. I’ve found that asking, “What data do I really need?” gets my logic gears turning. If something doesn’t work, rethink the setup. Sometimes, a few extra Properties make all the difference.
Binding: Your wiring
Binding is where the magic happens. You’re connecting your data (Properties) to other design values, making everything ready to respond just the way you planned.
💡 Quick Tips:
Bound values only show live when you press Play in the State Machine. If you're in Early Access, use the toggle next to the Export button to preview data in Design mode.
Watch out when binding Number Properties! For example, if "price" is 13 and "quantity" is 2, a multiplication formula won’t update those fields to show 2 and 13. But the hover tooltips will remind you what's bound!
Converters: Your cable adapters
Converters act as signal translators, transforming data from one format to another. Need to convert a number to a string or multiply a value? This is the way.
💡 Quick Tips:
Use Group Converters to chain multiple converters in one box, keeping your logic organized.
Start simple: The Formula converter looks complex. I felt the same at first. But with some trial and error, it starts to make sense. Starting with easy functions like Random really helps.
View Model Instances: Your working panels
Think of Instances as live versions of your blueprint, each with unique property values. For example, you might have a ProductCard Model including properties such as “product name,” “rating,” “price,” and “description.” You can then create different Instances for each type of product.
💡 Quick tips:
Instances are like filled-in templates: Use them to quickly create multiple designs from a single shared setup.
Mark instances as Exported when generating a Share Link or if devs need access.
View Model Nesting: Your modular setup
Nesting lets you embed View Model Instances within other View Models as a Property, like adding mini control panels into a big one. It’s perfect for creating modular designs using existing components.
💡 Quick tips:
Nesting + Instances = fast, reusable setups: For example, reuse an “item card” across a video game inventory screen.
Link nested artboards: Don’t forget to link nested artboards to their View Model in Data Bind > Model.
Data Binding + State Machine: Your CPU
The State Machine is the brain of any Rive project, and with Data Binding, it’s smarter than ever! It can now respond to data or update the View Model based on user input or defined logic.
💡 Quick Tips:
Properties aren't just for binding to editor elements! You can also use them as conditions in the State Machine, chain them with converters, or trigger View Model changes through listeners and events.
The State Machine UI has been updated: most logic setup now happens in the bottom panel instead of the right side. If you haven’t used Rive in a while, check out the updates!
Property Groups: Your mini utility circuits
When setting up Data Binding, sometimes you might need an intermediary to pass values or manage Property changes. That’s where Property Groups come in handy!
💡 Quick Tips:
Want to animate a View Model property? First, add a property (Number, String, or Boolean) to a Property Group. Then, bind it to your View Model property as Target to Source. Now, you can keyframe the Property Group’s property, and the View Model will follow.
You can find Property Groups under Stage Control Tools, next to Events and Joysticks, not in the Data panel.
Enums: Your mode selectors
Enums work like mode switches, giving you clear, named labels to control states. No more guessing what "1" or "2" means in a State Machine condition. Use intuitive options like “success” or “fail” instead.
💡 Quick Tips:
Enums make your logic easier to follow for both your dev teammates and yourself.
There are two types: system Enums (like “layout direction” or “layout alignment”) and custom Enums that you create for your own use cases.
Lists: Your auto-wired modules
Lists let you easily repeat visual components (like buttons, cards, or rows) based on your data. Instead of building each one manually, Rive does the work for you. Each item gets its own data, making it easy to build flexible UIs that grow (or shrink) with your content.
💡 Quick Tips:
Design your list item inside a nested artboard, then connect your List View Model to replicate it with dynamic data.
Populating your list with a Number? You’ll need a Number to List converter to make it work.
One last note: Naming
Everything in Rive’s Data Binding stays flexible. Even after setup, you can control it all at runtime. That’s the magic: no-code or full-code, your choice.
Still, one habit makes a huge difference no matter your path: clear naming. A property like maxNumber or a View Model called InventorySystem tells you exactly what it does and saves you from second-guessing later.
Mindsets for mastering Data Binding
Use visual metaphors. As designers, we often learn best through images. Representing abstract technical concepts visually can make them easier to grasp
Build ugly, learn fast. Start scrappy: gray boxes and simple logic. Focus on mastering Binding first; polish can come later.
Explain what you learn. Teaching others, whether in person, sharing content, or even by taking notes for yourself, helps strengthen your own understanding
Everyone’s learning path is unique. Don’t measure yourself against tutorials or perfect demos. Exploration > perfection.
Combine your Rive skills. Use layouts, bones, constraints, etc., with Data Binding to unlock new creative uses and stay motivated.
New to Rive? Get comfortable with the basics before jumping into Data Binding.
Learn like a developer: Research, remix, and level up
One developer skill I really admire, and that really comes into play here, is the ability to dig into docs and research to solve new problems:
Borrow from programming concepts: Many Data Binding ideas (bindings, enums, converters) mirror real code. Look them up if you’re stuck. You’ll still need to translate them to Rive, but they can give you helpful hints and context.
“Vibe Binding”? Why not? AI helpers like ChatGPT won’t provide Rive-specific Data Binding answers (yet), but they can explain logic and math and spark aha moments. Just remember to ask why, not just how. For me, learning to think like a developer means looking for intent, not just instructions.
That includes math. Features like the Formula Converter involve math operators. Don’t let that block you: break it down, Google it, use AI, ask. Curiosity beats being a “math person.” Letting go of that belief has been pivotal in my own learning.
Reverse-engineer files: Open Marketplace files, explore how things are wired, and try variations. Learning by tweaking is faster than just reading the manual!
Bind beyond
As the pieces connect, Data Binding shifts from wiring to creating. So keep exploring. Try weird things. Break stuff. Fix it. Remix it. The more you play, the easier it gets.
Need backup on your journey? Check out Rive’s documentation, learn with the 101 Data Binding tutorials, and tap into the Community.
Hi! I'm Mayte CG, a Rive Ambassador and experienced independent designer. With Rive, I can design interactivity firsthand, gaining complete creative control without needing to code. Today, I'm here to discuss a feature that takes this capability even further.
Imagine your design values — positions, colors, scales — as live signals that can react or trigger changes in real-time. That’s what Data Binding unlocks: developer-level control to build flexible, interactive logic right inside the Editor.
Even if you're not coding, some concepts can feel like programming and, yeah, a bit intimidating. I’ve been there. But with some play and exploration, it clicks. And the payoff? Real creative power.
This guide is your go-to — a designer-to-designer walkthrough to help you bind data with ease. It’s also the first in a three-part series. In this first part, we’ll focus on building a clear mental model of how Data Binding works to make it feel intuitive. I’ll also share some learning tips. In the next article, we’ll put theory into practice with hands-on mini-examples you can try right away. Finally, we’ll explore creative ideas and playful use cases to inspire your own projects.
The building blocks
Think of Data Binding as if you’re building a control panel with knobs, displays, and indicators, all driven by data.
Let's break down the key components:
View Model: Your blueprint
View Models are the schematic that lays out the data structure. They define which properties you’ll use and how they relate to one another.
💡 Quick tips:
Always link your artboard to the View Model. A common beginner mistake (guilty!) is hitting Play and… seeing nothing. When that happens, it’s usually just a missing connection. No View Model? No data!
View Model Properties: Your controls
Think of Properties as the specific knobs and dials in your panel, each controlling a particular data type like numbers, strings, colors, etc.
💡 Quick tips:
Start simple: Try intuitive properties like Number or Color first, then explore combinations for more complex logic.
Defining properties is a thinking step. I’ve found that asking, “What data do I really need?” gets my logic gears turning. If something doesn’t work, rethink the setup. Sometimes, a few extra Properties make all the difference.
Binding: Your wiring
Binding is where the magic happens. You’re connecting your data (Properties) to other design values, making everything ready to respond just the way you planned.
💡 Quick Tips:
Bound values only show live when you press Play in the State Machine. If you're in Early Access, use the toggle next to the Export button to preview data in Design mode.
Watch out when binding Number Properties! For example, if "price" is 13 and "quantity" is 2, a multiplication formula won’t update those fields to show 2 and 13. But the hover tooltips will remind you what's bound!
Converters: Your cable adapters
Converters act as signal translators, transforming data from one format to another. Need to convert a number to a string or multiply a value? This is the way.
💡 Quick Tips:
Use Group Converters to chain multiple converters in one box, keeping your logic organized.
Start simple: The Formula converter looks complex. I felt the same at first. But with some trial and error, it starts to make sense. Starting with easy functions like Random really helps.
View Model Instances: Your working panels
Think of Instances as live versions of your blueprint, each with unique property values. For example, you might have a ProductCard Model including properties such as “product name,” “rating,” “price,” and “description.” You can then create different Instances for each type of product.
💡 Quick tips:
Instances are like filled-in templates: Use them to quickly create multiple designs from a single shared setup.
Mark instances as Exported when generating a Share Link or if devs need access.
View Model Nesting: Your modular setup
Nesting lets you embed View Model Instances within other View Models as a Property, like adding mini control panels into a big one. It’s perfect for creating modular designs using existing components.
💡 Quick tips:
Nesting + Instances = fast, reusable setups: For example, reuse an “item card” across a video game inventory screen.
Link nested artboards: Don’t forget to link nested artboards to their View Model in Data Bind > Model.
Data Binding + State Machine: Your CPU
The State Machine is the brain of any Rive project, and with Data Binding, it’s smarter than ever! It can now respond to data or update the View Model based on user input or defined logic.
💡 Quick Tips:
Properties aren't just for binding to editor elements! You can also use them as conditions in the State Machine, chain them with converters, or trigger View Model changes through listeners and events.
The State Machine UI has been updated: most logic setup now happens in the bottom panel instead of the right side. If you haven’t used Rive in a while, check out the updates!
Property Groups: Your mini utility circuits
When setting up Data Binding, sometimes you might need an intermediary to pass values or manage Property changes. That’s where Property Groups come in handy!
💡 Quick Tips:
Want to animate a View Model property? First, add a property (Number, String, or Boolean) to a Property Group. Then, bind it to your View Model property as Target to Source. Now, you can keyframe the Property Group’s property, and the View Model will follow.
You can find Property Groups under Stage Control Tools, next to Events and Joysticks, not in the Data panel.
Enums: Your mode selectors
Enums work like mode switches, giving you clear, named labels to control states. No more guessing what "1" or "2" means in a State Machine condition. Use intuitive options like “success” or “fail” instead.
💡 Quick Tips:
Enums make your logic easier to follow for both your dev teammates and yourself.
There are two types: system Enums (like “layout direction” or “layout alignment”) and custom Enums that you create for your own use cases.
Lists: Your auto-wired modules
Lists let you easily repeat visual components (like buttons, cards, or rows) based on your data. Instead of building each one manually, Rive does the work for you. Each item gets its own data, making it easy to build flexible UIs that grow (or shrink) with your content.
💡 Quick Tips:
Design your list item inside a nested artboard, then connect your List View Model to replicate it with dynamic data.
Populating your list with a Number? You’ll need a Number to List converter to make it work.
One last note: Naming
Everything in Rive’s Data Binding stays flexible. Even after setup, you can control it all at runtime. That’s the magic: no-code or full-code, your choice.
Still, one habit makes a huge difference no matter your path: clear naming. A property like maxNumber or a View Model called InventorySystem tells you exactly what it does and saves you from second-guessing later.
Mindsets for mastering Data Binding
Use visual metaphors. As designers, we often learn best through images. Representing abstract technical concepts visually can make them easier to grasp
Build ugly, learn fast. Start scrappy: gray boxes and simple logic. Focus on mastering Binding first; polish can come later.
Explain what you learn. Teaching others, whether in person, sharing content, or even by taking notes for yourself, helps strengthen your own understanding
Everyone’s learning path is unique. Don’t measure yourself against tutorials or perfect demos. Exploration > perfection.
Combine your Rive skills. Use layouts, bones, constraints, etc., with Data Binding to unlock new creative uses and stay motivated.
New to Rive? Get comfortable with the basics before jumping into Data Binding.
Learn like a developer: Research, remix, and level up
One developer skill I really admire, and that really comes into play here, is the ability to dig into docs and research to solve new problems:
Borrow from programming concepts: Many Data Binding ideas (bindings, enums, converters) mirror real code. Look them up if you’re stuck. You’ll still need to translate them to Rive, but they can give you helpful hints and context.
“Vibe Binding”? Why not? AI helpers like ChatGPT won’t provide Rive-specific Data Binding answers (yet), but they can explain logic and math and spark aha moments. Just remember to ask why, not just how. For me, learning to think like a developer means looking for intent, not just instructions.
That includes math. Features like the Formula Converter involve math operators. Don’t let that block you: break it down, Google it, use AI, ask. Curiosity beats being a “math person.” Letting go of that belief has been pivotal in my own learning.
Reverse-engineer files: Open Marketplace files, explore how things are wired, and try variations. Learning by tweaking is faster than just reading the manual!
Bind beyond
As the pieces connect, Data Binding shifts from wiring to creating. So keep exploring. Try weird things. Break stuff. Fix it. Remix it. The more you play, the easier it gets.
Need backup on your journey? Check out Rive’s documentation, learn with the 101 Data Binding tutorials, and tap into the Community.
Join our newsletter
Get all the latest Rive news delivered to your inbox.