What is devtools-vue?

It is a Vue adapter for the json-render devtools inspector. It lets you inspect specs, edit state, view action and stream timelines, browse catalogs, and pick DOM elements in a Vue json-render app.

Does it affect production builds?

No. The panel renders nothing in production builds.

What can I inspect with the panel?

You can inspect json-render specs, edit state, view action and stream timelines, browse catalogs, and pick DOM elements.

How do I add it to my app?

Add the @json-render/devtools-vue package, then import and mount the JsonRenderDevtools component in your Vue json-render app.

@json-render/devtools-vue

SkillCloud & infra

The Vue adapter for the json-render devtools inspector is a skill that helps an agent add, configure, or troubleshoot @json-render/devtools-vue in a Vue json-render app. It covers spec inspection, state editing, action and stream timelines, catalog browsing, and DOM picking. The panel renders nothing in production builds.

Use @json-render/devtools-vue in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add @json-render/devtools-vue and connect your AI. About a minute.

Claude ChatGPT Ahel Desktop

Also: Claude Code · Cursor · Codex

Then ask your AI: use the @json-render/devtools-vue skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.

No other account needed.

Have a Vue json-render app set up and running.

@json-render/devtools-vueStart free

What your AI can do with it

Install and mount the JsonRenderDevtools component in a Vue json-render app
Inspect json-render specs from the devtools panel
Edit application state directly in the panel
View action and stream timelines
Browse catalogs and pick DOM elements

Getting started

Have a Vue json-render app set up and running.
Add the @json-render/devtools-vue package to the project.
Import and mount the JsonRenderDevtools component in the app.
Open the devtools panel to inspect specs, edit state, view timelines, browse catalogs, or pick DOM elements.

What this skill tells your AI

The instructions your AI receives, as published by vercel-labs/json-render in skills/devtools-vue/SKILL.md and read by ahel’s review.

Vue adapter for the json-render devtools panel. Read skills/devtools/SKILL.md for the shared panel capabilities, props, docking behavior, and server-side stream taps.

Install

npm install @json-render/devtools @json-render/devtools-vue

Mount the panel

Mount JsonRenderDevtools inside the existing Vue json-render provider:

<script setup>
import { JsonRenderDevtools } from "@json-render/devtools-vue";
</script>

<template>
  <JSONUIProvider :registry="registry">
    <Renderer :spec="spec" :registry="registry" />
    <JsonRenderDevtools :spec="spec" :catalog="catalog" :messages="messages" />
  </JSONUIProvider>
</template>

The component renders nothing in production builds. The panel provides the shared devtools controls, including the Ctrl/Cmd + Shift + J shortcut. Keep server-side stream instrumentation in @json-render/devtools.

Signals

GitHub stars: 18k
Forks: 978
Last commit: Sep 2026

ahel review

K1binfo
installs-packages

Automated review, not a security audit. Ruleset v1+k2.

Questions

What is devtools-vue?: It is a Vue adapter for the json-render devtools inspector. It lets you inspect specs, edit state, view action and stream timelines, browse catalogs, and pick DOM elements in a Vue json-render app.
Does it affect production builds?: No. The panel renders nothing in production builds.
What can I inspect with the panel?: You can inspect json-render specs, edit state, view action and stream timelines, browse catalogs, and pick DOM elements.
How do I add it to my app?: Add the @json-render/devtools-vue package, then import and mount the JsonRenderDevtools component in your Vue json-render app.

Advanced

Item type: skill
Key: devtools-vue
Source: github.com/vercel-labs/json-render

github.com/vercel-labs/json-render