devtools-react
React adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot @json-render/devtools-react in a React json-render app, including spec inspection, state editing, action and stream timelines, catalog browsing, or DOM picking.
Datos de origen
- Repositorio
- vercel-labs/json-render
- Última actividad en el origen
- 18 de septiembre de 2026 a las 18:44
- Idioma detectado de SKILL.md
- inglés
- Estrellas
- 18.686
- Forks
- 992
Opciones de instalación
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Revisa los archivos de origen
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Mostrando SKILL.md
SKILL.md
Instrucciones de origen · Vista previa de solo lectura- name
- devtools-react
- description
- React adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot @json-render/devtools-react in a React json-render app, including spec inspection, state editing, action and stream timelines, catalog browsing, or DOM picking.
# @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
```bash
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:
```tsx
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:
```tsx
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`.
Ver en GitHub