Design and Development of RAV

Working in Rive professionally means constantly answering questions the editor can't show cleanly. What does this state machine look like at runtime? What ViewModel paths exist on this artboard? How does this animation render at fixed pixel dimensions on Windows versus macOS? Before RAV, most of those questions required standing up a project, wiring the runtime, and writing scaffolding code just to watch the file behave.

The data problem underneath is what made this a design project: a .riv file is a deep tree of live, typed, changing state. Artboards contain state machines, state machines expose inputs, ViewModels nest inside ViewModels, and all of it updates in real time while the animation plays. The interface has to show that whole tree without drowning the user, and let them change values on a running system without fear.

I designed RAV for three audiences with opposite needs. Animators want to see and poke, visually, without code. Developers want exact, copy-ready integration artifacts. AI agents want a deterministic tool surface with no pixels at all. Each got a first-class door into the same underlying state:

The control panel is the animator's door: the full ViewModel tree and state-machine inputs visible on file load, every value editable in place, triggers as buttons.

The export system is the developer's door: canonical web instantiation code, a choice of which values get serialized, and a self-contained HTML demo with embedded runtime so a designer can hand a developer working proof with no build step.

The MCP sidecar is the agent's door: bundled as a binary with one-click setup for Claude Code, Codex, and Claude Desktop, exposing the same operations programmatically: open files, switch artboards, set values, fire triggers, generate snippets.

Show everything on drop. The empty state is the whole tree. A Rive file is interactive, so runtime control is the entire point of opening it: whoever you are, an animator, a developer, or someone just taking a look, the first thing you need is every input and value in front of you, live. Hiding that behind a search box or a collapsed outline would hide the product.

Make mutation feel safe. Editing a live value has to be reversible and legible. Values are grouped by their owning ViewModel, triggers are visually distinct from values, and reset returns the file to its loaded state, so poking is exploration, never damage.

One sizing model everywhere. Fit, alignment, and pixel dimensions are set once and honored everywhere: the preview, the generated snippets, the exported demos, and even the agent surface, which mirrors the same sizing model as an MCP tool. What you see is exactly what every downstream artifact reproduces.

Runtime version is a user-facing control. The same file can behave differently across runtime versions, so RAV lets you preview any version and auto-update to the latest. That turned a class of invisible bugs into a dropdown.

Say which brain is driving. The runtime can be driven by RAV's internal wiring or by live-applied editor code. The title block always states which source is active, because an inspector that can lie about what it's showing is worse than no inspector.

Over 60 versioned releases in, some of those decisions were earned the hard way. A window-chrome and export regression in the 2.1.x line led to regression-test gates and an architecture budget enforced in CI. A client file that played choppy in RAV but smooth on Rive's hosted runtime forced a renderer investigation that also uncovered an artboard-switch flicker. Some things I killed outright. Transparency preview, the ability to see an animation over a see-through window, was a real request from a niche of users and it never stabilized: platform-specific rendering quirks kept surfacing faster than fixes, so I scrapped it. Shipping it half-working to everyone for the benefit of a few would have cost the tool more trust than the feature earned.

RAV ships on macOS (Apple Silicon and Intel) and Windows, distributed through aescripts.com and GitHub with signed builds and an auto-updater. It's listed in Rive's official community resources, and I drive it daily through its own MCP sidecar as part of my client work, including the State Farm NBA All-Star and AT&T Final Four arena projects. It's the inspector layer of a stack that also includes my Rive Luau VS Code extension and LERP, a 77-lesson scripting course: author in VS Code, debug in RAV, learn in LERP.

Stack: Tauri shell, Vite/JavaScript frontend, official Rive runtime. Source: github.com/ivg-design/rive-animation-viewer