Menu

Post image 1
Post image 2
Post image 3
1 / 3
0

I built a website for developers to preview .riv files and debug Rive ViewModels

DEV Community·Oussama Afassi·28 days ago
#jD3y7Esa
#webdev#rive#frontend#animation#state#every
Reading 0:00
15s threshold

If you've ever shipped a Rive animation in a real app, you know the moment. You wire up the .riv , hook up the ViewModel , push inputs into the state machine , and… something's off. A trigger isn't firing. A boolean is stuck. The state machine is taking the wrong transition. The animation looks like it's playing but the values you read back don't match what you set. So you do what I did for way too long. You start spamming console.log . Rebuild. Reload. Trigger the interaction. Watch the logs scroll past at 60fps. Squint. Add another log. Rebuild. Reload. I did this for about a month. Then I decided to build a tool for it. 👉 rive.best — drop a .riv , see everything inside, change values live. Why debugging Rive is painful The Rive runtime is genuinely great, but the developer experience for inspecting a .riv from the outside is rough. ViewModel Instance properties are opaque. You only see what you've explicitly logged. There's no "show me everything" panel. State machines are a black box at runtime.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More