devtools-svelte

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

@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.

适用于 json-render 开发者工具面板的 Svelte 5 适配器。关于通用面板功能、props、停靠行为以及服务端流监听的内容，请阅读

skills/devtools/SKILL.md

。

Install

安装

bash

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

bash

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

Mount the panel

挂载面板

Mount

JsonRenderDevtools

inside the existing Svelte json-render provider:

svelte

<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

shortcut. Keep server-side stream instrumentation in

@json-render/devtools

将

JsonRenderDevtools

挂载到现有的 Svelte json-render provider 中：

svelte

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

<JSONUIProvider {registry}>
  <Renderer {spec} {registry} />
  <JsonRenderDevtools {spec} {catalog} {messages} />
</JSONUIProvider>

该组件在生产构建中不会渲染任何内容。面板提供通用的 devtools 控件，包括

Ctrl

Cmd

Shift

快捷键。服务端流埋点需在

@json-render/devtools

中配置。