Skill Store 33

Devtools React

React adapter for the json-render devtools inspector.

by vercel-labs · Apache-2.0

The skill

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

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.

Use this skill

Connect your agent to the Skill Store MCP server and ask for it by ref: vercel-labs/devtools-react-45819388821.

Download SKILL.md · Markdown version

Details

Publisher
vercel-labs
Category
Software Development › Developer docs & tooling
License
Apache-2.0
Updated
2026-10-13

References

More from vercel-labs

  • Playwright E2E Write and stabilise end-to-end browser tests
  • Codegen Code generation utilities for json-render.
  • Core Core package for defining schemas, catalogs, and AI prompt generation for json-render.
  • Devtools Solid SolidJS adapter for the json-render devtools inspector.

Related skills