Rive Previewer

Preview Rive .riv files directly inside VS Code and Cursor.

• Click a .riv file in the Explorer to open the interactive preview.
• Play/pause animations, drive state machines, and fire triggers.
• Set booleans and numbers on state-machine inputs live.
• Tweak background color, Fit, and alignment.
• Toggle an artboard-bounds overlay so you can see exactly where the design is drawn.

Runs the official @rive-app/canvas runtime locally — no network access is required, and the file bytes never leave your machine.

Screenshots

Animations tab (light bg)	Skin swap (dark bg)

Works everywhere you use VS Code

The extension declares extensionKind: ["ui", "workspace"], so VS Code installs it on the UI side by default (best for webviews) but can also install it inside the remote when needed. .riv bytes are read through vscode.workspace.fs, which transparently reaches into the remote filesystem — no path-mapping or drive-mount setup required. Untrusted workspaces are also supported (the extension only reads file bytes; it never executes them).

Usage

• Open any .riv file — the preview replaces the default binary view.
• Or right-click a .riv file in the Explorer → Open Rive Preview.
• Or run Rive: Open Rive Preview / Rive: Open Rive Preview to the Side from the Command Palette.

Develop locally

npm install
npm run build

Then press F5 in VS Code. A new Extension Development Host window opens; drop a .riv file in it to test.

For iterative work:

npm run watch:extension   # in one terminal
npm run watch:webview     # in another

Package a .vsix

npm run package

Install the resulting rive-previewer-<version>.vsix locally with Extensions: Install from VSIX… in the Command Palette, or share it directly.

Publish to the VS Code Marketplace

Prereqs (one-time):

1. A publisher created at https://marketplace.visualstudio.com/manage (this project uses victorasa21).
2. Either a Personal Access Token from Azure DevOps (scope: Marketplace → Manage), or use Azure CLI (az login --allow-no-subscriptions) + vsce publish --azure-credential. Alternatively, upload the .vsix file directly via drag-and-drop on the Marketplace management page.

Every release:

# Bump "version" in package.json first.
npm run package                          # generates rive-previewer-<version>.vsix
# Then either:
#   - Drag rive-previewer-<version>.vsix onto https://marketplace.visualstudio.com/manage , or:
#   - npx vsce publish  (requires PAT via vsce login), or:
#   - npx vsce publish --azure-credential  (requires az login)

vscode:prepublish runs npm run build:prod (minified) automatically.

Project layout

src/
  extension.ts          # activation, commands
  previewProvider.ts    # CustomReadonlyEditorProvider + webview HTML/CSP
  webview/main.ts       # webview logic (Rive runtime, controls)
media/
  webview.css           # webview styles
  webview.js            # bundled by esbuild
  rive.wasm             # copied from @rive-app/canvas
scripts/copy-wasm.js    # postbuild copy of the wasm file

Known limitations (v1)

• Code Snippets tab (Web/React/Flutter/iOS/Android) is not included yet.
• The .riv file is treated as read-only — no editing or export.

Acknowledgements

Inspired by rive.rip — the browser-based Rive previewer whose control layout (Animations / State Machines tabs, Appearance, Layout) this extension mirrors so working locally feels familiar.

License

MIT