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, your animation, and your scripts.

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.

🔍 ViewModel Inspector Sidebar

A collapsible sidebar that auto-discovers every property and renders the right control for it.

⚛️ 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.

🔎 Smart Search & Metadata

Instant search across all properties. Artboard name, state machine list, animation count — all surfaced at a glance.

🛠 Luau Scripting Support

Generate Luau editor scripts directly from the Rive Explorer sidebar or the Developer Guide panel. Choose from multiple protocol templates (blank, native, incoming, outgoing) and get a .luau file ready to edit.

💡 Luau IntelliSense & Hover

Full completions and inline documentation for the Rive Luau API as you type — no need to memorise every property name.

🎨 Luau Formatter (Format on Save)

A built-in, web-compatible Luau/Lua formatter that cleans up indentation, normalises spacing, and trims trailing whitespace automatically when you save.

🔄 Asset Replacement

Discover and replace assets embedded in your Rive files dynamically. Browse all images, audio, and fonts in the Assets tab (both in the sidebar and dev guide), pick replacements from your file system, and see updates instantly in the preview. Perfect for testing different content without re-exporting animations.

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, the Assets tab to swap images/audio/fonts, the Dev Guide to copy production-ready React code, or create a Luau editor script straight from the sidebar.

Requirements

Requirement	Details
	Minimum version required
	Modern GPU/browser support
	Works everywhere VS Code runs
	Zero runtime dependencies for users

Tech Stack

Release Notes

v1.2.9 — Latest (2026-08-21)

• Upgraded to @rive-app/react-webgl2 v4.32.1 (from v4.27.1)
• Improved canvas rendering and alignment in VS Code webview environments
• Fixed text and component positioning issues across different zoom levels and display densities
• Enhanced WebGL rendering performance and stability
• Better dimension detection for canvas containers in webview

v1.2.6 — Previous release

• Luau script generation from Rive Explorer sidebar & Developer Guide
• Blank / native / incoming / outgoing protocol templates
• Luau IntelliSense (completions + hover) for the Rive API
• Built-in Luau/Lua formatter with Format on Save support
• Styled sidebar controls and Developer Guide protocol selector

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