Introduction
If your team ships interactive animation made in Rive, someone has to check the exported file before it goes into the app. Watching it play isn't enough. You need to know the right artboard is in there, the state machine reacts to its inputs, and nothing gets stuck in a state it shouldn't.
ToolBuddy's Rive Animation Viewer is built for that check. It opens the exported `.riv` file on your machine, runs it in a separate worker so the page stays responsive, and gives you the controls you need for reviewing rather than editing.
Here's a typical review, from opening the file to handing a record of what you tested to the developers.
Start with the exported `.riv` file
Use the `.riv` file your team is actually going to ship, the one exported for the runtime. The viewer doesn't open `.rev` project files or editor backups. If that's all you have, export a `.riv` from Rive first.
Drop the file in or pick it with the file browser. The viewer first checks that it really is a Rive file, then starts the runtime in a background worker. Big files take a moment to start, but the rest of the page keeps working while they do.
- Use the exported `.riv`, not the `.rev` project file.
- Drag it in or use the file picker.
- Give it a second to start up, then the preview appears.
Pick the artboard, animation or state machine to review
Once it's loaded, use the controls under the preview to switch the artboard, animation or state machine. One export often holds several: a button's states, a few character variants, or a whole set of icons.
To check timing on a single clip, pick that animation. To check behavior, pick the state machine instead. Keep the runtime info panel open so whoever's watching knows which artboard and state machine are active.
- Choose the artboard for the part of the product you're checking.
- Switch to a specific animation to check the timing of one clip.
- Switch to a state machine to check how it responds to input.
Check how it looks with playback and layout controls
Use play, pause and speed to look at pacing, pauses and transitions that repeat. When you're on an animation, the progress bar follows the active clip, so you can see exactly where in the timeline something happens.
Fit, alignment and background let you see it roughly how it'll sit in the product. Try contain against cover, or fitWidth, to see how it behaves in a wide banner compared with a small square button, and set the background to your app's color so contrast issues show up now. Sound is muted in the preview, so check any audio in the app itself.
- Slow it down to catch a transition, speed it up to check a long loop.
- Change fit and alignment to match where it will actually appear.
- Set the background to the real UI color.
Try the inputs and watch what the state machine does
This is where the viewer earns its place. If the state machine has boolean, number or trigger inputs, they show up in the control panel, and you can drive them just as the app code would. Try the edge cases: flip a boolean twice quickly, set a number right at its threshold, fire a trigger mid-transition.
As you go, the state timeline shows each state change, so you can see whether the machine went where you expected or took an odd path to get there. That's usually faster than reading through the state machine in the editor.
- Flip booleans to check each conditional state.
- Change numbers to test thresholds and ranges.
- Fire triggers to check one-off transitions.
Hand it over with handoff mode and the session log
If you're showing the preview to someone else, turn on handoff mode. It hides the layout and input panels and keeps just the recent state changes and events on screen, so a design review doesn't turn into a tour of the controls.
The event recorder logs everything that happened in the session: play, pause, stops and loops, state changes, every input you touched, and speed changes. Export it as a JSON file and attach it to the ticket. A developer can then see exactly what you did and what the animation did in response, which beats a screenshot and a paragraph of "it sort of glitched".
Written by
Ankit Kumar
Senior Software Engineer & Founder at ToolBuddy
Engineering browser-first utilities with zero upload requirements using WebAssembly, Web Audio, and Canvas technologies.