Rive Blog
Create a star rating component with Rive’s State Machine
Use Rive’s State Machine to design an animated interactive component that is ready to ship.
Updated 9/29/25 for Data Binding
Rive’s visual State Machine is a way for designers to build interactive graphics that actually work (not just mockups or prototypes). It puts the designer in the driver’s seat for the functionality that ships in the product.
We think this is an important creative aspect that is missing in modern workflows, particularly in product design.
State machines make designers think more like developers, without having to write code. At the same time, visual state machines make it easy for developers to implement graphics without needing to be involved in every design iteration. Without a state machine, the logic created by a designer would need to be recreated in code by a developer, which is an inefficient use of both roles.
The component we’re creating
If you want to follow along, remix this 👉 star rating file from the Rive Community.
In the file, you’ll find an artboard named Tutorial to follow along. There’s also an artboard named Complete if you want to see the finished component.
Design and animation
Rive has two modes: Design and Animate. This is somewhat unique in the design tool space. I wrote about it here if you’re interested in the details.
In Design Mode, we created the stars and all the shapes needed for the various states.
In Animate Mode, we created six animations for all the states (empty and rating 1-5).
If you remixed our star rating file, then you’ll see that the Tutorial artboard is already set up with these animations for you. I’m not going to walk through that process, as it should be pretty straightforward if you’re familiar with design and animation. If you’re new to both, check out any design or animation tutorials, as these concepts are relatively similar across tools.
Adding interactivity
We strongly recommend you use Data Binding. In modern Rive files, you control state machines through Data Binding — not inputs. You'll define a View Model with a rating property and bind it so the State Machine reacts whenever that property changes.
Animations as states
Each star is its own animation. The State Machine treats these animations as "states." When the rating value changes, the state machine will switch into the matching star state.
Drag and drop the star animations onto the state machine graph to set up your states.
Also, add the empty animation and connect it to the Entry state. This will make your state machine start with no stars selected.
Transitions
Transitions enable designers to define the possible sequences of actions that can happen without having to write code. Without a state machine, all this logic would have to be written in code.
For this component, we’re going to create transitions from Any State to the star states. A transition from the Any State will happen regardless of what state is currently active.
Bind a View Model property
Create (or open) a View Model and add a Number (or Enum) property called rating. Link your artboard to this View Model, then bind the rating property so it's available inside the state machine.
When rating changes (from 0 to 5), the state machine will react to that value.
Tip: Linking the artboard to the View Model is required. If nothing happens on Play, check that connection first.
In this case, we’re going to create a number input called “Rating.”
Conditions
Select the transition from the Any State to your first star state and set its condition to Rating == 1. Do the same for the other transitions (Rating == 2, Rating == 3, etc.).
Now, whenever the bound rating property changes, the state machine will automatically switch to the correct star state.
Listeners
If you want to click stars in the Rive Editor to simulate user interaction, add Listeners. For each star, set a Pointer Down listener that sets the rating property to the star's number (1-5).
This lets you preview the data flow without writing any runtime code.
Tip: Add a listener with your target already selected. It will automatically set the listener to use your selection as the target.
You’re finished! Can you take this further?
In a real product, the component should initialize from data (for example, a saved user rating). With Data Binding, just set the View Model's rating value before playback and your state machine will start on the correct star automatically.
Why Data Binding?
Data Binding is the recommended way to drive Rive graphics at runtime. View Models support richer types — numbers, booleans, strings, enums, colors, lists, even nested data — and make two-way, reactive UIs straightforward. Inputs (our legacy feature) were never designed to cover that range.
Dive deeper into the concepts we covered
📺 Animation mixing video. The State Machine can do more than just play one animation at a time – it can blend and mix multiple animations at the same time.
🎨 Learn more about designing state machines in the Rive Editor.
Updated 9/29/25 for Data Binding
Rive’s visual State Machine is a way for designers to build interactive graphics that actually work (not just mockups or prototypes). It puts the designer in the driver’s seat for the functionality that ships in the product.
We think this is an important creative aspect that is missing in modern workflows, particularly in product design.
State machines make designers think more like developers, without having to write code. At the same time, visual state machines make it easy for developers to implement graphics without needing to be involved in every design iteration. Without a state machine, the logic created by a designer would need to be recreated in code by a developer, which is an inefficient use of both roles.
The component we’re creating
If you want to follow along, remix this 👉 star rating file from the Rive Community.
In the file, you’ll find an artboard named Tutorial to follow along. There’s also an artboard named Complete if you want to see the finished component.
Design and animation
Rive has two modes: Design and Animate. This is somewhat unique in the design tool space. I wrote about it here if you’re interested in the details.
In Design Mode, we created the stars and all the shapes needed for the various states.
In Animate Mode, we created six animations for all the states (empty and rating 1-5).
If you remixed our star rating file, then you’ll see that the Tutorial artboard is already set up with these animations for you. I’m not going to walk through that process, as it should be pretty straightforward if you’re familiar with design and animation. If you’re new to both, check out any design or animation tutorials, as these concepts are relatively similar across tools.
Adding interactivity
We strongly recommend you use Data Binding. In modern Rive files, you control state machines through Data Binding — not inputs. You'll define a View Model with a rating property and bind it so the State Machine reacts whenever that property changes.
Animations as states
Each star is its own animation. The State Machine treats these animations as "states." When the rating value changes, the state machine will switch into the matching star state.
Drag and drop the star animations onto the state machine graph to set up your states.
Also, add the empty animation and connect it to the Entry state. This will make your state machine start with no stars selected.
Transitions
Transitions enable designers to define the possible sequences of actions that can happen without having to write code. Without a state machine, all this logic would have to be written in code.
For this component, we’re going to create transitions from Any State to the star states. A transition from the Any State will happen regardless of what state is currently active.
Bind a View Model property
Create (or open) a View Model and add a Number (or Enum) property called rating. Link your artboard to this View Model, then bind the rating property so it's available inside the state machine.
When rating changes (from 0 to 5), the state machine will react to that value.
Tip: Linking the artboard to the View Model is required. If nothing happens on Play, check that connection first.
In this case, we’re going to create a number input called “Rating.”
Conditions
Select the transition from the Any State to your first star state and set its condition to Rating == 1. Do the same for the other transitions (Rating == 2, Rating == 3, etc.).
Now, whenever the bound rating property changes, the state machine will automatically switch to the correct star state.
Listeners
If you want to click stars in the Rive Editor to simulate user interaction, add Listeners. For each star, set a Pointer Down listener that sets the rating property to the star's number (1-5).
This lets you preview the data flow without writing any runtime code.
Tip: Add a listener with your target already selected. It will automatically set the listener to use your selection as the target.
You’re finished! Can you take this further?
In a real product, the component should initialize from data (for example, a saved user rating). With Data Binding, just set the View Model's rating value before playback and your state machine will start on the correct star automatically.
Why Data Binding?
Data Binding is the recommended way to drive Rive graphics at runtime. View Models support richer types — numbers, booleans, strings, enums, colors, lists, even nested data — and make two-way, reactive UIs straightforward. Inputs (our legacy feature) were never designed to cover that range.
Dive deeper into the concepts we covered
📺 Animation mixing video. The State Machine can do more than just play one animation at a time – it can blend and mix multiple animations at the same time.
🎨 Learn more about designing state machines in the Rive Editor.
Updated 9/29/25 for Data Binding
Rive’s visual State Machine is a way for designers to build interactive graphics that actually work (not just mockups or prototypes). It puts the designer in the driver’s seat for the functionality that ships in the product.
We think this is an important creative aspect that is missing in modern workflows, particularly in product design.
State machines make designers think more like developers, without having to write code. At the same time, visual state machines make it easy for developers to implement graphics without needing to be involved in every design iteration. Without a state machine, the logic created by a designer would need to be recreated in code by a developer, which is an inefficient use of both roles.
The component we’re creating
If you want to follow along, remix this 👉 star rating file from the Rive Community.
In the file, you’ll find an artboard named Tutorial to follow along. There’s also an artboard named Complete if you want to see the finished component.
Design and animation
Rive has two modes: Design and Animate. This is somewhat unique in the design tool space. I wrote about it here if you’re interested in the details.
In Design Mode, we created the stars and all the shapes needed for the various states.
In Animate Mode, we created six animations for all the states (empty and rating 1-5).
If you remixed our star rating file, then you’ll see that the Tutorial artboard is already set up with these animations for you. I’m not going to walk through that process, as it should be pretty straightforward if you’re familiar with design and animation. If you’re new to both, check out any design or animation tutorials, as these concepts are relatively similar across tools.
Adding interactivity
We strongly recommend you use Data Binding. In modern Rive files, you control state machines through Data Binding — not inputs. You'll define a View Model with a rating property and bind it so the State Machine reacts whenever that property changes.
Animations as states
Each star is its own animation. The State Machine treats these animations as "states." When the rating value changes, the state machine will switch into the matching star state.
Drag and drop the star animations onto the state machine graph to set up your states.
Also, add the empty animation and connect it to the Entry state. This will make your state machine start with no stars selected.
Transitions
Transitions enable designers to define the possible sequences of actions that can happen without having to write code. Without a state machine, all this logic would have to be written in code.
For this component, we’re going to create transitions from Any State to the star states. A transition from the Any State will happen regardless of what state is currently active.
Bind a View Model property
Create (or open) a View Model and add a Number (or Enum) property called rating. Link your artboard to this View Model, then bind the rating property so it's available inside the state machine.
When rating changes (from 0 to 5), the state machine will react to that value.
Tip: Linking the artboard to the View Model is required. If nothing happens on Play, check that connection first.
In this case, we’re going to create a number input called “Rating.”
Conditions
Select the transition from the Any State to your first star state and set its condition to Rating == 1. Do the same for the other transitions (Rating == 2, Rating == 3, etc.).
Now, whenever the bound rating property changes, the state machine will automatically switch to the correct star state.
Listeners
If you want to click stars in the Rive Editor to simulate user interaction, add Listeners. For each star, set a Pointer Down listener that sets the rating property to the star's number (1-5).
This lets you preview the data flow without writing any runtime code.
Tip: Add a listener with your target already selected. It will automatically set the listener to use your selection as the target.
You’re finished! Can you take this further?
In a real product, the component should initialize from data (for example, a saved user rating). With Data Binding, just set the View Model's rating value before playback and your state machine will start on the correct star automatically.
Why Data Binding?
Data Binding is the recommended way to drive Rive graphics at runtime. View Models support richer types — numbers, booleans, strings, enums, colors, lists, even nested data — and make two-way, reactive UIs straightforward. Inputs (our legacy feature) were never designed to cover that range.
Dive deeper into the concepts we covered
📺 Animation mixing video. The State Machine can do more than just play one animation at a time – it can blend and mix multiple animations at the same time.
🎨 Learn more about designing state machines in the Rive Editor.
Join our newsletter
Get all the latest Rive news delivered to your inbox.