Rive Playground — Inspect, Control & Export Rive Animations

Three tools, one mission

From terminal to AI assistant to visual editor — inspect and control Rive files everywhere.

⌨️

CLI Inspector

Inspect artboards, animations (with fps/duration), state machines, and inputs. Scan directories, validate configs, generate TypeScript types.

🤖

MCP Server

Let AI assistants like Claude analyze your .riv files. 5 tools: inspect, scan, validate, generate-types, watch — all via the Model Context Protocol.

🎨

Visual Playground

Drag-and-drop .riv files, edit ViewModel properties in real-time, zoom/pan the canvas, export configs as JSON or Markdown for LiveOps.

🖼️

Image Mapping

Upload images or paste URLs to swap image properties on the fly. Decoded through Rive WASM and applied instantly to the animation.

🎭

Nested ViewModels

Drill into nested ViewModel instances (Offer1, Offer2, ...) with collapsible panels. Edit deeply nested properties with full path support.

🔌

Zero Native Deps

No more node-canvas build failures. Pure WASM via @rive-app/canvas-advanced — works on macOS, Linux, Windows out of the box.

Up and running in seconds

CLI

MCP

Playground

# Install & build
npm install && npm run build

# Inspect a .riv file
node dist/cli.js inspect animation.riv

# Output:
Artboards (4):
  ★ Main (360×800)
    Animations (15):
      - Coin Fountain (1.37s @ 30fps)
    State Machines (1):
      - State Machine 1
          [trigger] RESET
          [boolean] Mouse InFrame

# Start MCP server
node dist/mcp.js

# Add to Claude Desktop config:
# ~/Library/Application Support/Claude/claude_desktop_config.json
{
  "mcpServers": {
    "rive-analyzer": {
      "command": "node",
      "args": ["/path/to/dist/mcp.js"]
    }
  }
}

# 5 tools available:
  inspect-rive         Analyze a single .riv file
  scan-rive-files      Find all .riv in a directory
  validate-rive-config Compare .riv with JS/TS config
  generate-rive-types  Generate TypeScript constants
  watch-rive-files     Watch for file changes

# Start the visual playground
cd playground
npm install
npm run dev

# Open in browser
http://localhost:5173

# Or try the hosted version:
https://nano-step.github.io/rive-playground/playground/

# Features:
  🎨 Drag & drop .riv files
  🔧 Edit ViewModel properties in real-time
  🎛️ Control state machine inputs
  🖼️ Map images via URL or upload
  📤 Export config as JSON / Markdown
  🔍 Zoom (Ctrl+Scroll) & Pan (Alt+Drag)

See Inside Your Rive Animations