🎬 Rive for VS Code

Preview · Inspect · Script · Ship — without leaving your editor

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.

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.

🔎 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.