Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>Joyous Inspector to RiveNew to Visual Studio Code? Get it now.
Joyous Inspector to Rive

Joyous Inspector to Rive

joyous studio

| (0) | Free
Inspect and preview Rive .riv files in VS Code. / 在 VS Code 中检查并预览 Rive .riv 文件。
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Joyous Inspector to Rive - VS Code

Joyous Inspector to Rive 0.0.9.10 is the first VS Code plugin-line release. It focuses on one stable path:

Open .riv -> Inspect structure -> Review details -> Preview and interact inside VS Code

中文:

Joyous Inspector to Rive 0.0.9.10 是 VS Code 插件线的首个版本。本版聚焦一条稳定主路径:

打开 .riv -> 检查结构 -> 查看详情 -> 在 VS Code 内预览和交互

Screenshots / 截图

Inspect right panel / 右侧 Inspect 面板
Inspect right panel
Preview interaction and grid / 预览交互和网格
Preview interaction and grid
Asset preview / 资源预览
Asset preview
Deep Inspect evidence / 深度检查证据
Deep Inspect evidence

Features in 0.0.9.10

  • Associate .riv files with Joyous Inspector to Rive.
  • Double-click .riv files from the Explorer to open a singleton Inspect panel.
  • Reuse the same Inspect panel when switching between .riv files instead of opening duplicate preview tabs.
  • Prefer a right-side editor group when another editor is already open, so code can stay on the left and Inspect can stay on the right.
  • Open .rev files in the same Joyous panel with a clear unsupported diagnostic for this first release.
  • Use Explorer and editor context menu commands:
    • Joyous Rive: Open Inspect
    • Joyous Rive: Open Preview
  • Inspect file, runtime, structure, artboard, animation, state machine, input, event, and asset details.
  • Browse an expandable tree for file overview, Deep Inspect evidence, artboards, and assets.
  • Preview .riv files inside a VS Code Webview with bundled local WebGL2 and Canvas Rive runtimes.
  • Support preview play / pause, default playback selection, texture toggle, grid toggle, screenshot export, and basic pointer interaction used by Rive state machines.
  • Preview embedded image assets and save supported asset files locally.
  • Show diagnostics instead of a blank Webview when structured Inspect or Preview cannot start.

0.0.9.10 功能

  • 将 .riv 文件关联到 Joyous Inspector to Rive。
  • 从资源管理器双击 .riv 文件,打开单例 Inspect 面板。
  • 切换 .riv 文件时复用同一个 Inspect 面板,避免打开重复预览标签。
  • 当已有编辑器打开时,优先使用右侧编辑组,让代码留在左侧、Inspect 留在右侧。
  • .rev 文件会在同一个 Joyous 面板中显示清晰的暂不支持诊断说明。
  • 支持资源管理器和编辑器上下文菜单命令:
    • Joyous Rive: Open Inspect
    • Joyous Rive: Open Preview
  • 检查文件、runtime、结构、artboard、animation、state machine、input、event 和 asset 详情。
  • 浏览文件概览、Deep Inspect 证据、artboards 和 assets 的树形导航。
  • 使用内置本地 WebGL2 和 Canvas Rive runtime,在 VS Code Webview 内预览 .riv 文件。
  • 支持播放 / 暂停、默认播放目标选择、纹理开关、网格开关、截图导出,以及 state machine 预览中的基础指针交互。
  • 支持内嵌图片资源预览,并可另存支持的资源文件。
  • 当结构化 Inspect 或 Preview 无法启动时显示诊断信息,而不是空白 Webview。

Not included yet

These features are intentionally outside the 0.0.9.10 scope:

  • .rev parsing and preview support.
  • Device Preview.
  • LAN / QR browser preview.
  • Reference code generation.
  • Commands / Agent / Skill workflows.
  • Skeleton display.
  • Mesh / Skin / Tendon / Keyframe visualization.
  • Runtime parameter editing or writing changes back to .riv.
  • A native VS Code Auxiliary Bar implementation identical to Codex Chat. The first release uses a singleton Webview panel and prefers the right editor group when possible.

暂不包含

以下能力不属于 0.0.9.10 范围:

  • .rev 解析和预览。
  • 真机预览。
  • LAN / QR 浏览器预览。
  • 参考代码生成。
  • Commands / Agent / Skill 工作流。
  • 骨骼显示。
  • Mesh / Skin / Tendon / Keyframe 可视化。
  • Runtime 参数编辑或写回 .riv。
  • 与 Codex Chat 完全一致的 VS Code 原生 Auxiliary Bar 实现。首版使用单例 Webview 面板,并在可行时优先显示到右侧编辑组。

Settings / 配置项

Joyous Inspector to Rive contributes these VS Code settings:

Joyous Inspector to Rive 提供以下 VS Code 配置项:

  • joyousRive.rivcPath Optional path to a local rivc / joyous-rive CLI executable used for structured .riv Inspect data. 可选的本地 rivc / joyous-rive CLI 可执行文件路径,用于读取结构化 .riv Inspect 数据。

  • joyousRive.javaPath Optional path to a Java 21+ executable used by the bundled Joyous Inspector to Rive CLI. 可选的 Java 21+ 可执行文件路径,用于运行插件内置的 Joyous Inspector to Rive CLI。

  • joyousRive.lockInspectLayout Lock the Inspect editor split layout. The default layout already uses the designed tree, details, and preview proportions. 锁定 Inspect 编辑器分割布局。默认打开时已经使用树形区、详情区和预览区的设计比例。

Privacy

The VS Code extension reads local .riv files only for local Inspect and Preview. .rev files are opened only for file-level diagnostics in 0.0.9.10. It does not upload animation files, source code, or project data, and it does not call external AI services in 0.0.9.10.

隐私

VS Code 插件只为本地 Inspect 和 Preview 读取本地 .riv 文件。.rev 文件在 0.0.9.10 中只打开文件级诊断信息。插件不上传动画文件、源码或项目数据,也不调用外部 AI 服务。

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft