What is this?
Rive for VS Code turns your editor into a full Rive animation workstation. Open any .riv file and get a live, interactive preview — plus a sidebar to inspect and manipulate every ViewModel property, and a built-in developer guide with copy-ready React code.
No browser. No context switching. Just you and your animation.
The 10× Workflow
Before this extension:
Design → Export → Open Browser → Tweak → Back to Code → Integrate
With Rive for VS Code:
Design → Inspect → Code → Integrate ✦ all inside VS Code
Demo
Features
▶ Live WebGL Rendering
Open any .riv file and it renders instantly in a hardware-accelerated canvas — right inside your editor tab. No setup, no browser.
A collapsible sidebar that auto-discovers every property and renders the right control for it.
| Property |
Control |
What it does |
| 🟢 Boolean |
Toggle switch |
Flip state on/off instantly |
| 🔵 Number |
Slider + input |
Scrub or type an exact value |
| 🟡 String |
Text field |
Edit copy in real time |
| 🔴 Color |
Color picker |
Full hex + alpha support |
| 🟣 Enum |
Dropdown |
Cycle through every variant |
| 🩷 Trigger |
Fire button |
One-click event dispatch |
| 🔷 Nested ViewModel |
Expandable tree |
Full hierarchical control |
⚛️ React Developer Guide
Built-in tab with copy-ready snippets, an auto-generated custom hook, and a full @rive-app/react-webgl2 API cheat sheet.
Instant search across all properties. Artboard name, state machine list, animation count — all surfaced at a glance.
Quick Start
# 1. Install from the VS Code Marketplace — search "Rive Editor"
# 2. Open a .riv file
code my-animation.riv
# 3. That's it. It renders.
Then use the Inspector panel to tweak properties live, and the Dev Guide tab to copy production-ready React code straight into your project.
Requirements
| Requirement |
Details |
 |
Minimum version required |
 |
Modern GPU/browser support |
 |
Works everywhere VS Code runs |
 |
Zero runtime dependencies for users |
Tech Stack
Release Notes
v0.0.1 — Initial release
- Custom WebGL2 editor for
.riv files
- ViewModel Inspector with full property controls
- Developer Guide with React snippets and API reference
- Smart search and artboard metadata
