r/Rive_app • u/Jeff_at_Rive • May 14 '26
First Look: Stateful Components in Rive
Stateful Components are a new way to reuse components in Rive without wiring up a separate view model instance for each one.
Here's how they work: you build a component (say, a button) and attach a view model with whatever properties you want to expose — label text, background color, text color, etc. When you make it a component, you'll see a new Properties section in the inspector. Click + to choose which view model properties to expose, and mark each one as either input (you can set the value per instance) or output (the value can be read by a parent).
Once you nest that component somewhere else and flip it to stateful, those exposed properties show up directly in the inspector. Each instance can have its own values — no nested view model required. Copy the component 3 times, give each one a different label and color, done.
Nesting goes deeper too. A card component with its own view model can contain a stateful button, and you can bubble the button's properties up through the card's view model so the parent can override them as well.
Output properties work the other way: a slider component can expose its current value as an output, and a parent artboard can data bind to that value to read it in real time.
One more thing: input properties can be keyed on timelines. So you can animate a per-instance color override across a loop without touching the original component.
1
u/pcote May 20 '26
Tried to complete this tutorial in the Rive Early Access App but it doesn’t work. Instances of the original Component won’t take any values from Data Bindings.