rive-app / rive-app/rive-react

How do I access artboard and view model instance with useRive?

Open
#337 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.2k
Forks
58
Avg merge
3h 23m
Merged PRs (30d)
6

Description

My rive file got update, if before I used to use rive.setNumberStateAtPath to change my block lines count, now I need to access view model instance to directly change text in that box, for example change its font size.

From rive docs, I received these instructions on how to do it:

Access the View Model Instance:
Within your application, retrieve the Artboard from the loaded Rive file. Then, access the ViewModelInstance associated with that Artboard. This instance contains the properties you’ve defined and bound in the Rive editor.
Modify Properties at Runtime:
Once you have access to the View ModelInstance, you can get or set its properties to reflect changes in your application. For example, if you have a property controlling font size, you can update it based on user input or other runtime conditions.

BUT, the problem is, there is no properties on my rive to get artboard

Image

Here is how I initialize the rive:

Image

Importing everything from @rive-app/react-canvas

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the Rive instance initialized through @rive-app/react-canvas and determine how the loaded file and its artboard are exposed. Compare the available API with the documented ViewModelInstance access, and consider the work complete when the requested artboard and view-model properties can be accessed for runtime updates.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.