mirror of https://github.com/vercel-labs/json-render.git synced 2026-09-14 13:41:32 +08:00

Files

T

History

Chris Tate 838ee7bf00 prepare v0.19.0 (#282 )

Bump all @json-render/* packages to 0.19.0, add changelog entry for
custom directives API and @json-render/directives package, and update
the web app changelog page.

2026-05-06 22:42:42 -05:00

src

devtools (#273 )

2026-04-17 14:29:04 -05:00

package.json

prepare v0.19.0 (#282 )

2026-05-06 22:42:42 -05:00

README.md

devtools (#273 )

2026-04-17 14:29:04 -05:00

tsconfig.json

devtools (#273 )

2026-04-17 14:29:04 -05:00

tsup.config.ts

devtools (#273 )

2026-04-17 14:29:04 -05:00

README.md

@json-render/devtools-react

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

Installation

npm install @json-render/devtools @json-render/devtools-react

Peer dep: react@^19.

Usage

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

Floating toggle appears bottom-right.
Hotkey: Ctrl/Cmd + Shift + J.
Tree-shakes to null in production builds.

Imperative API

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

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

See the devtools docs for the full prop reference and panel tour.

License

Apache-2.0