Rive Editor for VS Code

Preview, play, and inspect Rive (.riv) animation files directly inside Visual Studio Code — no browser required.

Features

• Custom Editor — Opens .riv files in a WebGL-powered canvas right inside VS Code.

Demo

• Live Animation Playback — Plays state machines and animations automatically on load.
• ViewModel Inspector Sidebar — A collapsible sidebar that discovers every ViewModel property in the file and lets you tweak them in real time:
  • Booleans — Toggle switch
  • Numbers — Text input + range slider
  • Strings — Editable text field
  • Colors — Native color picker with hex readout
  • Enums — Dropdown selector with all options
  • Triggers — One-click fire button
  • Nested ViewModels — Expandable tree with full property controls
• Search & Filter — Quickly find properties by name.
• Artboard & State Machine Metadata — View artboard name, state machines, animations, and property counts at a glance.
• Developer Guide — Built-in tabs with copy-ready code snippets, a custom hook generator, and a full API cheat sheet for @rive-app/react-webgl2.

Getting Started

1. Install the extension.
2. Open any .riv file in VS Code — it will render automatically.
3. Use the Inspector sidebar to interact with ViewModel properties.
4. Switch to the Dev Guide tab for ready-to-copy React integration code.

Requirements

• VS Code 1.109.0 or later.
• The extension runs as a web extension — it works in VS Code for the Web as well as the desktop app.

Release Notes

0.0.1

• Initial release.
• Custom editor for .riv files with WebGL rendering.
• ViewModel property inspector with live editing.
• Developer guide with code snippets and API reference.

Built with Rive WebGL2 and React.