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";
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.