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

#rive #animation #frontend #webdev

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. You can read inputs, but the active state isn't easy to surface without writing your own state-change listener.
Linear animations are worse. A single artboard can carry a dozen animations and the only way to know which is doing what is by name and trial-and-error.
The Rive editor is for designing, not poking at runtime values mid-integration. Once you export the .riv, you're on your own.

You can spin up a throwaway sandbox project every time, but that's twenty minutes of plumbing per file and you end up half-rebuilding the same junk inspector again and again.

What rive.best does

Drag any .riv onto the page. It instantly shows you:

Every artboard.
Every state machine on each artboard.
Every ViewModel Instance property — booleans, numbers, strings, colors, enums, triggers, nested ViewModels, and lists.
Every linear animation (in case the file doesn't use a state machine at all).
A live, tailing event log of state changes, plays, pauses, loops, and your custom Rive events.

The part that mattered most to me: you can change every value live. Toggle a boolean, drag a number, fire a trigger, pick a color, and the canvas reacts in real time. No rebuild, no reload, no more console.log.

Pin the properties you care about to a sticky watch list so they stay on top while you flip through scenarios. Filter the event log with a regex when there's too much noise. Switch artboards and state machines from the sidebar without ever leaving the page.

Files stay in your browser. Nothing is uploaded.