Add @json-render/devtools-react to the dependencies of a React json-render app, then mount the JsonRenderDevtools component inside the app.

How do I open or toggle the panel?

Use the useJsonRenderDevtools hook to open, toggle, and record events.

@json-render/devtools-react

SkillCloud & infra

This skill is a React adapter for the json-render devtools inspector. It helps an agent add, configure, or troubleshoot @json-render/devtools-react in a React json-render app, covering spec inspection, state editing, action and stream timelines, catalog browsing, and DOM picking. The agent uses it to install and mount the JsonRenderDevtools component so the panel can observe renderer state, actions, and streams.

Use @json-render/devtools-react in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add @json-render/devtools-react and connect your AI. About a minute.

Claude ChatGPT Ahel Desktop

Also: Claude Code · Cursor · Codex

Then ask your AI: use the @json-render/devtools-react skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.

No other account needed.

Have a React json-render app set up with its dependencies installed.

@json-render/devtools-reactStart free

What your AI can do with it

Install and mount the JsonRenderDevtools React component in a json-render app
Inspect and edit renderer state through the devtools panel
View action and stream timelines recorded by the inspector
Browse the catalog from within the devtools panel
Pick DOM elements to locate their corresponding spec nodes
Use the useJsonRenderDevtools hook to open, toggle, and record events

Getting started

Have a React json-render app set up with its dependencies installed.
Add @json-render/devtools-react to the project's dependencies.
Mount the JsonRenderDevtools component inside the app so the panel can observe renderer state, actions, and streams.
Use the useJsonRenderDevtools hook to open or toggle the panel and to record events.
Note that the panel renders nothing in production builds.

What this skill tells your AI

The instructions your AI receives, as published by vercel-labs/json-render in skills/devtools-react/SKILL.md and read by ahel’s review.

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.

Signals

GitHub stars: 18k
Forks: 978
Last commit: Sep 2026

ahel review

K1binfo
installs-packages

Automated review, not a security audit. Ruleset v1+k2.

Questions

What is devtools-react?: It is a React adapter for the json-render devtools inspector. It lets an agent 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, and DOM picking.
How do I install it?: Add @json-render/devtools-react to the dependencies of a React json-render app, then mount the JsonRenderDevtools component inside the app.
How do I open or toggle the panel?: Use the useJsonRenderDevtools hook to open, toggle, and record events.

Advanced

Item type: skill
Key: devtools-react
Source: github.com/vercel-labs/json-render

github.com/vercel-labs/json-render