A View Model defines the structure of your data. It acts as a reusable blueprint that contains a collection of properties, such as a car’s color, speed, and damage.Each property has a type, such as Number, String, Boolean, Color, Enum, or List (For more information, see View Model Properties).View Models do not store values themselves. Instead, values are stored in one or more View Model Instances that are created from the View Model.For example, if you were building a racing game, you might create a Car View Model with the following properties:
Car (View Model) color: Color damage: number make: string speed: number
A single View Model can be used to create many View Model Instances. Each instance shares the same structure but stores its own values.
The properties in your instances can then be bound to elements in your designs, allowing text, images, colors, animations, state machines, and other properties to react to data changes automatically.
A View Model defines the structure of your data. Before creating View Model Instances or setting up data bindings, you’ll first need to create a View Model and add properties to it.
New Rive files come with a default view model called “ViewModel1” that is already attached to the main artboard.
1
Add a View Model
In the Data panel Click the + icon and select View Model.
2
Add Properties
In the Data panel, click the Add View Model Property button next to the view model name and select your property type.
A View Model can have multiple instances. Each instance contains its own set of property values while sharing the same structure defined by the View Model.
When creating a new View Model, Rive automatically creates a View Model Instance named “Instance” so you can immediately begin testing bindings and previewing data.
1
View existing instances
Select a View Model in the Data panel, then click the Controls icon next to the instance name in the Inspector.
To see all of your view model instances and values at once, click the Open Table Data button.
2
Add an instance
Click the + icon to add a new instance.
3
Name the instance
Double click the instance’s name to rename it.
4
Update the instance data
With the instance selected, change any of its properties.Note that this changes only the values on the selected view model instance.
By default, exported View Model Instances are included in the .riv file. Disable Export Instance when the data is only needed during development, not in your application at runtime.
Components can also have their own View Model Instances.In this pattern, the parent View Model stores references to child instances, either directly or through a list.
GameVM├─ health└─ score└─ avatar└─ inventory (stores an instance of InventoryVM)InventoryVM├─ Sword├─ Shield└─ Potion
Each component instance can have its own view model instance attached to it.This approach is useful when a parent artboard needs to manage a collection of items while still allowing each component to maintain its own data.Because each instance must be created and connected explicitly, this pattern provides strong runtime control at the cost of additional setup.
A stateful component is an instance of a component that maintains its own data.Unlike traditional component View Model Instances, these instances do not need to be created or referenced by the parent View Model. Instead their properties are exposed in the sidebar.For more information, see Stateful Components.
