@json-render/devtools-svelte
SkillCloud & infraLets your agent add and troubleshoot a Svelte devtools panel for inspecting -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-svelte skill
About this capability
Svelte 5 adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot @json-render/devtools-svelte in a Svelte 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-svelte/SKILL.md and read by ahel’s review.
Svelte 5 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-svelte
Mount the panel
Mount JsonRenderDevtools inside the existing Svelte json-render provider:
<script>
import { JsonRenderDevtools } from "@json-render/devtools-svelte";
</script>
<JSONUIProvider {registry}>
<Renderer {spec} {registry} />
<JsonRenderDevtools {spec} {catalog} {messages} />
</JSONUIProvider>
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-svelte- Source
- github.com/vercel-labs/json-render
github.com/vercel-labs/json-render