Riv Eye: a free Rive file inspector that runs in your browser

Riv Eye is a free browser tool that lists every data binding property in any .riv file. No upload, no setup. Review mode collects client feedback.

You get a .riv file from a designer, a client, or the Rive community. Before you can use it, you need to know what's inside. Which colors can you change? Is there a text field? Is there a trigger for the success state, and what is it called?

The usual answers are slow. Open the Rive editor and dig through panels, or write a few lines of code and log the view model to the console. Both work, but it's a lot of ceremony for a question that should take ten seconds.

We ran into this while building Hoverine. Our templates run on data binding, and there was no quick way to drop a .riv into a browser and see every property it exposes. So we built one. It's called Riv Eye, it's free, and it works on any Rive file.

What happens when you drop a file in

Drag a .riv onto the page. Riv Eye reads the view model and builds a control for every property it finds. Color pickers for colors, text inputs for text, upload slots for images, number fields, toggles for booleans, dropdowns for enums, buttons for triggers. Change a value and the animation updates on the canvas right away.

Nobody has to set anything up. Labels come from the property names in the file. If a designer prefixes a property with an underscore, it stays hidden, which is a quiet way to keep internal plumbing out of sight. The panel builds itself from whatever the file contains, and that's the part we like most.

The first version was a bare inspector with a few sample templates you could shuffle through. It has since become two tools in one. Inspect is still there for animators and developers. Review is the newer half, and we'll get to it in a minute.

Why the view model matters

Data binding is where design and code meet in Rive. A view model is a set of named properties the file exposes: this color, that string, this trigger. If you can see them, you can wire them up. If you can't, you're guessing at names and checking the console. It's the same idea as the state machine inputs we used in our login tutorial, just with a lot more of the file open to you.

Riv Eye shows all of it at once, so you find out what a file can do before you commit to using it.

Your file stays on your machine

Inspecting a file doesn't need a server, so Riv Eye doesn't use one. The .riv is read in your browser and goes nowhere. That began as a technical shortcut, and then we realized it was also a promise worth making. People are protective of unreleased work. "Your file stays on your machine" is an easy thing to say when it's true.

It's also why Riv Eye reads any .riv, not just ours. A tool that only works on your own products is a sales funnel wearing a disguise, and people can tell. If it handles anyone's file, it can certainly handle ours. Some of those people find Hoverine later on their own, but that's not why the tool exists.

Review: comments pinned to the canvas

Sending an animation to a client usually means a screen recording and an email thread full of "the thing on the left, around three seconds in." Review replaces that. You share a link, the client pins comments right on the canvas, and every comment captures the exact state of the controls at that moment. When a version is ready, you approve it.

Review is the one place a file leaves your browser. A shared link needs the file to live somewhere, so starting a review is a deliberate step. It requires sign-in, and it says plainly that it uploads.

The hard part wasn't what we expected

We assumed reading the file or building the live controls would be the headache. Neither was. The Rive runtime does a lot of the reading for you, and the controls follow a clear map from property type to input.

The trouble was Review. The runtime can't force a state machine into a specific state, so you can't just jump back to the exact frame someone commented on. Instead we restore the input and view model values, let the machine settle, and keep a thumbnail as a fallback for when it drifts. It's not sophisticated, but it holds up.

Review also has a timing problem that no amount of restoring can fix. To show a client a hover effect, you hover over the button, then move your mouse to click "Add comment." By the time you get there, the hover is gone and the frame freezes without it. You end up commenting on a state that no longer exists.

The fix was a keyboard shortcut. Press C and Riv Eye freezes the frame and opens a comment right where your cursor is.

A testing tool that became the product

This is the surprise. The Customize panel on every Hoverine template page is Riv Eye's control panel. Subscribers change the text, colors and images, then download a .riv with those choices already baked in. [INTERNAL LINK: /templates "browse Rive templates"]

That changed how we think about what a template even is. Once a file exposes clean view model properties, the .riv itself is customizable. You don't need the source file or the editor.

Who it helps

Developers who inherit a file and need the exact property names before wiring up code. Designers checking that a file exposes what they meant it to. Freelancers and agencies who want client feedback in one place instead of five threads. Anyone learning Rive who wants to see how a well-built file is put together.

About the name

We went through plenty of names. Riv Eye was the only one that made us laugh, so it won. Yes, that's a steak watching you work. The logo is a live Rive animation, which gave us a chance to show some personality.

Try it with your own file

Open Riv Eye, drag in a .riv, and see what it exposes. Use a community file from Rive, something a client sent you, or one of ours. If you find a file that breaks it, we want to hear about it.

What's next

Drawing directly on the canvas in Review, side-by-side version comparison, and email notifications, so reviewers and owners don't have to keep checking back.