@json-render/devtools-vue
SkillCloud & infraLets your agent add and troubleshoot a Vue devtools panel for inspecting json-render specs, state, and timelines.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the @json-render/devtools-vue skill
About this capability
Vue adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot @json-render/devtools-vue in a Vue json-render app, including spec inspection, state editing, action and stream timelines, catalog browsing, or DOM picking.
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
- 17k
- Forks
- 901
- Last commit
- Sep 2026
ahel review
K1binfo
installs-packages
Automated review, not a security audit. Ruleset v1+k2.
Advanced
- Catalog kind
- skill
- Gateway key
devtools-vue- Source
- github.com/vercel-labs/json-render
github.com/vercel-labs/json-render