mcpField
D
devtools-react

devtools-react

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

About devtools-react

A React adapter that adds the json-render devtools panel to an existing provider. It exposes panel controls and an imperative hook, and renders nothing in production builds.

Key features

  1. 01Mount a devtools panel in React
  2. 02Observe renderer state, actions, and streams
  3. 03Open or toggle the panel with a hook
  4. 04Record stream events
  5. 05Hide the panel in production

Use cases

  1. 01Inspect renderer state during development
  2. 02Open or close the panel from React components
  3. 03Record stream events for debugging

Install

Copy the command and run it in a terminal.

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

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

Details

From the project README

@json-render/devtools-react

React 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-react

Mount the panel

Mount JsonRenderDevtools inside the existing React json-render provider so it can observe the renderer's state, actions, and streams:

import { JsonRenderDevtools } from "@json-render/devtools-react";

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

The component renders nothing in production builds. The panel provides the shared devtools controls, including the Ctrl/Cmd + Shift + J shortcut.

Imperative controls

Use useJsonRenderDevtools from any mounted React descendant:

import { useJsonRenderDevtools } from "@json-render/devtools-react";

const devtools = useJsonRenderDevtools();
devtools?.open();
devtools?.toggle();
devtools?.recordEvent({ kind: "stream-text", at: Date.now(), text: "hi" });

The hook returns null in production or before the component has mounted. Keep server-side stream instrumentation in @json-render/devtools.

Comments

Markdown supported