[Community] Rive Playground — Open-source visual inspector & real-time ViewModel editor for .riv files

[hoainho]

🎨 Rive Playground

Inspect, edit, and export Rive animations — right in the browser.
▶ Live Demo · GitHub · Landing Page

The problem

Our LiveOps team manages dozens of Rive animations for in-app campaigns. They need to tweak text, colors, and toggles daily — but don't have access to the Rive Editor.
We built this so they can drop a .riv file and start editing instantly.

What it does

Drop any .riv file → see it play → edit ViewModel properties in real-time → export the config
Supported types: string · number · boolean · color · enum · trigger · image · nested viewModel
All changes reflect on the canvas immediately. No build step. No login.

Highlights

• 🔧 Full ViewModel editing — every property type, including nested VMs and image upload/URL
• 📋 Animation inspector — all artboards, animations with fps/duration, SM inputs with type badges
• 🔍 Canvas controls — zoom, pan, direct Rive event passthrough (hover, click)
• 📤 Config export — JSON + Markdown for LiveOps → CMS handoff
• ⌨️ CLI + MCP Server — inspect .riv files from terminal or AI assistants

Built with

Package	Version	Role
@rive-app/react-canvas	v4.27	Rendering + interaction
@rive-app/canvas-advanced	v2.36	Metadata extraction (zero native deps)
React	19	Playground UI
Vite	8	Build tool

Patterns we discovered

These might be useful for other developers working with rive-react:

Challenge	Solution
useRive doesn't re-init on param change	React key forces clean remount
defaultViewModel().defaultInstance() returns disconnected copy	Use rive.viewModelInstance (live-bound by runtime)
Repeated propertyFromPath calls fail after first access	Cache property objects at extraction time
Stale closures in useCallback	useRef for mutable values like selected SM name

Feedback welcome

We'd love any input from the Rive team:

• Anything in the API we're using incorrectly?
• Would this fit in awesome-rive?
  Thanks for building such an incredible animation platform 🙌