import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/api/devtools-react")

# @json-render/devtools-react

React adapter for the json-render devtools. Drop-in `<JsonRenderDevtools />` component.

See the [Devtools guide](/docs/devtools) for the drop-in walkthrough.

## JsonRenderDevtools

```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>
```

### Props

```tsx
interface JsonRenderDevtoolsProps {
  /** Current spec being rendered. */
  spec?: Spec | null;
  /** Catalog definition (required for the Catalog panel). */
  catalog?: Catalog | null;
  /** AI SDK useChat messages array. */
  messages?: readonly UIMessage[];
  /** Start the panel open. Default: false. */
  initialOpen?: boolean;
  /** Floating toggle position. */
  position?: "bottom-right" | "bottom-left" | "right";
  /** Toggle keybinding, or false to disable. Default: "mod+shift+j". */
  hotkey?: string | false;
  /** Ring buffer size. Default: 500. */
  bufferSize?: number;
  /** Fires for every devtools event. */
  onEvent?: (evt: DevtoolsEvent) => void;
}
```

In production builds the component renders `null`.

## useJsonRenderDevtools

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

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

Access the running devtools instance from anywhere in the React tree. Returns `null` in production or before the component has mounted.