What is this?

Rive for VS Code turns your editor into a full Rive workstation:

• Preview any .riv live, and inspect and drive every ViewModel property, state machine and asset.
• Generate data-binding code for every Rive runtime, straight from the open file.
• Write Luau scripts, RML scenes and WGSL shaders with IntelliSense and errors from the Rive CLI's own language server.
• Build, verify, test, preview and push Rive CLI projects, with problems in the Problems panel.

No browser. No context switching.

The 10× Workflow

Before this extension:

Design  →  Export  →  Open Browser  →  Tweak  →  Back to Code  →  Integrate

With Rive for VS Code:

Design  →  Inspect  →  Code  →  Build  →  Integrate   ✦  all inside VS Code

Features

▶ Live .riv preview

Open any .riv file and it renders instantly in a hardware-accelerated WebGL2 canvas, right in your editor tab.

• Live reload: when the file changes on disk (rive . --once, an export, a git checkout), the preview reloads by itself.
• Files without a state machine (animation-only) play too.
• Timeline, event log, state machine switcher and canvas background controls.

🔍 ViewModel Inspector

A sidebar that discovers every property and gives you the right control for it.

Instant search across all properties; artboard, state machines and animation count at a glance. The Code panel turns the current values into code for your platform.

🔄 Assets: inspect, replace live, hot reload

Every image, font and audio file in the .riv, shared between the inspector sidebar and the Dev Guide.

• Previews: image thumbnails with dimensions, font samples, audio playback.
• Know what you ship: real format (read from the bytes), size, how much of the .riv is assets, and hints for oversized images, heavy PNGs, fonts and audio.
• Referenced assets (not embedded in the .riv) are loaded from your workspace automatically, so the preview matches your app. It looks next to the .riv, then in its subfolders, then anywhere in the workspace. Missing ones are flagged with a Locate… button.
• Replace swaps an asset live, and the animation keeps running. Edit the replacement file and it hot-reloads. Revert anytime; the .riv is never modified.
• Save as… extracts an asset to disk.
• Copy loader code gives you the out-of-band loader for your runtime: assetLoader, referencedAssets, customLoader, ContextAssetLoader, or FileAssetLoader.
• Filter by Images / Fonts / Audio / Issues and sort by size or name.

⚛️ Developer Guide: data binding for every runtime

Pick React, Web JS, React Native, Apple, Android, Flutter, C++ or Luau, and get code generated from the open file using each runtime's documented data-binding API:

• Wire up this file: a complete, paste-ready integration using the file's real artboard, state machine and the values currently in the preview. It never fires triggers on load.
• Your Props: every property including nested view models (settings/volume), with current values, colour swatches, enum options, and a read / write / listen snippet each. Filter, expand all, or copy the whole wire-up.
• API: each runtime's data-binding calls with examples, and links to Rive's docs.
• Rive Setup and Assets tabs.

⌨️ Rive CLI, built in

Install the Rive CLI and the extension picks it up automatically. It checks your PATH, ~/.rive/bin, Homebrew, then your login shell; or you can set rive.cliPath.

Also: Create project (blank, from .rev, or from a Rive file), clone samples, search schema and docs, push with a revision label, pull, login/logout, doctor, and update or switch the CLI version.

It works with multiple projects: every folder with a rive.yaml is found, and commands target the project you're editing.

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    { "type": "rive", "command": "build", "project": "animations", "args": ["--optimize"], "group": { "kind": "build", "isDefault": true } },
    { "type": "rive", "command": "test", "group": "test" }
  ]
}

💡 IntelliSense & errors from rive lsp

When the CLI is installed, Luau, RML and WGSL files get completions, hover and errors from the CLI's own language server.

• One server per Rive project, rooted at the folder with rive.yaml, so the project resolves exactly like the CLI does.
• Attaches by file pattern (.luau, .rml, .wgsl), so it keeps working when another extension registers those file types.
• Built-in fallback IntelliSense (Rive Luau API completions and hover, RML tags, attributes and ids, go-to-definition) runs in the browser build and when the CLI isn't installed. On desktop it steps aside only for features the server actually provides.
• Rive: Check Language Server tells you why IntelliSense or errors aren't showing. It runs rive lsp directly on your current file, sends it a deliberately broken copy to prove errors work, and checks which extensions claim your file types. You get a report with the fix.
• If Rive's official extension is also installed, you're asked once which extension should run the language server, so you don't see every error twice.

🛠 Luau scripting

• Create Rive Editor Luau Script from the Command Palette, the Rive Explorer sidebar or the Dev Guide, with templates for every protocol: Node, Layout, Converter, Path Effect, Listener Action, Transition Condition, Util and Test.
• Luau syntax highlighting and a built-in formatter (format on save for .luau).

📐 RML (Rive Markup)

Syntax highlighting with embedded Luau, auto-closing tags, <!-- --> comments, formatting, and tag / attribute / id completion with go-to-definition for ids.

🟣 WGSL shaders

• Syntax highlighting: attributes, address spaces, builtins, typed constructors, nested comments.
• Snippets: rive-shader, uniform, texture, @vertex, @fragment.
• Rive: Create WGSL Shader, starting from Rive's documented fullscreen shader.
• Errors from rive lsp, with CLI build problems mapped onto .wgsl files.
• AssemblyScript can be sent to rive lsp too (experimental, opt-in via rive.lsp.assemblyScript).

Quick Start

# 1. Install from the VS Code Marketplace: search "Rive for VSCode"

# 2. Open a .riv file (it renders straight away)
code my-animation.riv

# 3. Optional: install the Rive CLI for builds, errors and IntelliSense
curl -fsSL https://releases.rive.app/cli/install.sh | sh     # macOS / Linux
irm https://releases.rive.app/cli/install.ps1 | iex          # Windows

Then:

• Use the Inspector to tweak properties live, and Assets to swap images, fonts and audio.
• Open the Dev Guide for code for your platform.
• Open the Rive sidebar's CLI panel to create, preview, build and test projects.

Settings

Lua files: Rive scripts use .luau, and the CLI only compiles .luau. The extension doesn't claim every .lua file. To treat .lua as Luau anyway, add "files.associations": { "*.lua": "luau" }.

Troubleshooting

Requirements

Requirement	Details
	Minimum version required
	Modern GPU/browser support
	Viewer, inspector, Dev Guide and fallback IntelliSense work everywhere VS Code runs
	Desktop only. Unlocks build / verify / test, the Problems panel, and rive lsp IntelliSense

Tech Stack

Release Notes

v1.7.1 — Latest (2026-09-29)

• Language server reworked: one rive lsp per Rive project, attached by file pattern; fallback IntelliSense steps aside only for features the server provides
• New Rive: Check Language Server diagnostic report
• Notice when Rive's official extension is also running rive lsp

v1.7.0 (2026-09-29)

• Assets panel rebuilt: referenced assets load from the workspace, live replace / revert, hot reload, previews, size budget and hints, Save as…, per-runtime loader code

v1.6.0 (2026-09-29)

• WGSL shaders: highlighting, snippets, Create Shader, rive lsp errors; opt-in AssemblyScript
• Dev Guide rebuilt around each runtime's documented data-binding API, with "Wire up this file"

v1.5.0 (2026-09-28)

• Rive CLI integration reworked: Problems panel, verify on save, multi-project support, Preview terminal with live controls, rive tasks, rive.yaml CodeLens, status bar
• Live reload for .riv previews; Save As fixed; animation-only files load

Earlier: WebGL2 viewer, ViewModel inspector, Dev Guide, Luau script generation, IntelliSense and formatter.

See CHANGELOG.md for everything.