mcpField
D
devtools-svelte

devtools-svelte

github.com/vercel-labsDevelopment18.8k108 installsUpdated 5d ago
Repository

About devtools-svelte

A Svelte 5 adapter for the json-render devtools panel, intended for projects using the Svelte json-render provider. It adds the shared panel to development builds and stays hidden in production.

Key features

  1. 01Svelte 5 panel adapter
  2. 02Mounts within a json-render provider
  3. 03Hidden in production builds
  4. 04Ctrl/Cmd + Shift + J shortcut

Use cases

  1. 01Inspecting json-render projects in Svelte
  2. 02Opening the devtools panel with a keyboard shortcut

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/vercel-labs/json-render --skill devtools-svelte

After installing, type/devtools-sveltein Claude Code to confirm it loaded.

Details

From the project README

@json-render/devtools-svelte

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.

Comments

Markdown supported