What is devtools-svelte?

It is a Svelte 5 adapter for the json-render devtools inspector. It lets you add, configure, or troubleshoot @json-render/devtools-svelte in a Svelte json-render app.

How do I open the devtools panel?

Use the Ctrl/Cmd+Shift+J shortcut.

Does it render in production builds?

No, it renders nothing in production builds.

What can I do with the panel?

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

@json-render/devtools-svelte

SkillCloud & infra

The devtools-svelte skill is a Svelte 5 adapter for the json-render devtools inspector. It helps you add, configure, or troubleshoot @json-render/devtools-svelte in a Svelte json-render app. Once mounted, it provides a panel for inspecting specs, editing state, viewing action and stream timelines, browsing catalogs, and picking DOM elements. It renders nothing in production builds.

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

Free. Sign in, add @json-render/devtools-svelte 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-svelte 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.

Ensure you have a Svelte 5 json-render application.

@json-render/devtools-svelteStart free

What your AI can do with it

Add @json-render/devtools-svelte to a Svelte 5 json-render app
Configure the devtools panel within the app's provider
Inspect json-render specs
Edit application state
View action and stream timelines
Browse catalogs and pick DOM elements

Getting started

Ensure you have a Svelte 5 json-render application.
Install the @json-render/devtools-svelte package.
Mount the devtools component inside the app's provider.
Use the Ctrl/Cmd+Shift+J shortcut to open the panel.

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: 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-svelte?: It is a Svelte 5 adapter for the json-render devtools inspector. It lets you add, configure, or troubleshoot @json-render/devtools-svelte in a Svelte json-render app.
How do I open the devtools panel?: Use the Ctrl/Cmd+Shift+J shortcut.
Does it render in production builds?: No, it renders nothing in production builds.
What can I do with the panel?: You can inspect specs, edit state, view action and stream timelines, browse catalogs, and pick DOM elements.

Advanced

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

github.com/vercel-labs/json-render