Introduction
If your team ships interactive motion built in Rive, you need a dependable way to review the exported runtime file before it reaches production code. That means looking beyond a simple visual preview and checking how artboards, animations, state machines, and inputs behave together.
ToolBuddy's Rive Animation Viewer gives you a browser-based workspace for that exact job. It opens exported `.riv` files locally, runs the preview in an isolated runtime worker, and keeps the review surface focused on runtime behavior instead of editing features.
This guide walks through the typical review flow so you can move from file load to state-machine testing and handoff without unnecessary setup.
Start with the exported `.riv` runtime file
Begin with the exported Rive runtime file that your team plans to ship or validate. The viewer is designed for `.riv` outputs, not editable `.rev` source project files or internal backups.
Drop the `.riv` file into the tool or choose it from the file picker. The viewer validates the RIVE binary signature first, then starts the runtime preview inside an isolated canvas worker so the main page stays responsive during startup.
- Use an exported `.riv` runtime file.
- Load it with drag and drop or the file picker.
- Wait for runtime startup and preview initialization.
Choose the artboard, animation, or state machine you need to review
Once the file loads, use the bottom controls to switch the active artboard, animation, or state machine. This is useful when the same export includes multiple UI states, character variants, or motion systems.
For purely timeline-based review, focus on a specific animation. For interaction validation, move to the relevant state machine and keep the runtime context panel visible so reviewers know exactly which selection is active.
- Select the right artboard for the surface you are reviewing.
- Switch animations when you need clip-level timing checks.
- Change state machines when you need behavior and input validation.
Use playback, speed, and layout controls to check presentation
Playback controls help you review motion pacing, pauses, and repeated state transitions. When the selection exposes an animation timeline, progress feedback stays synced to the active clip so you can inspect timing more precisely.
Layout settings such as fit, alignment, scale, speed, and canvas background make it easier to simulate where the animation will live inside a product. These controls are especially useful for embedded UI review, responsive placement checks, and cross-device QA.
- Adjust speed to slow down or accelerate review.
- Change fit, alignment, and scale to match the target surface.
- Set a canvas background that reflects the real UI context.
Test state-machine inputs and inspect live runtime behavior
Interactive previews become valuable when you can manipulate the same inputs that the production runtime will receive. If the loaded state machine exposes booleans, numbers, or triggers, use them directly in the control panel to test transitions and edge cases.
As you interact, the viewer can surface state timeline changes and runtime events. That makes it easier to understand whether the current state changed as expected or whether an input produced a surprising transition path.
- Toggle booleans to review conditional states.
- Edit numbers to test threshold or range behavior.
- Fire triggers to validate event-driven transitions.
Use handoff mode and the event recorder for review-ready output
When you want to present the preview cleanly to another reviewer, enable handoff mode. This keeps the most useful runtime context visible while reducing lower-signal controls that are less relevant during feedback sessions.
The event recorder is the final step for structured review. Use it to capture what happened during the session, then export the local JSON summary for engineering follow-up, QA notes, or design review documentation.