json-render/packages/devtools

@json-render/devtools

Framework-agnostic core for the json-render devtools — vanilla TS panel UI, event store, DOM picker, and stream tap utilities.

Most users never import from this package directly. Pick the adapter that matches your renderer and drop the <JsonRenderDevtools /> component into your app:

• @json-render/devtools-react — React
• @json-render/devtools-vue — Vue
• @json-render/devtools-svelte — Svelte
• @json-render/devtools-solid — Solid

See the devtools guide for the full walkthrough.

Installation

npm install @json-render/devtools

This package is pulled in automatically by every framework adapter. Install it directly only if you're building your own adapter or using the stream tap utilities on the server.

What you get

• Event store — capped ring buffer with push, subscribe, snapshot, clear.
• Panel — shadow-DOM-isolated drawer with six tabs (Spec, State, Actions, Stream, Catalog, Pick).
• Stream taps — wrap pipeJsonRender / YAML transforms to mirror patches into the event store.
• Picker — DOM overlay that maps clicked elements back to spec keys via data-jr-key.

Example: server-side stream tap

import { tapJsonRenderStream, createEventStore } from "@json-render/devtools";
import { pipeJsonRender } from "@json-render/core";

const events = createEventStore({ bufferSize: 1000 });

const tapped = tapJsonRenderStream(
  result.toUIMessageStream(),
  events,
);
writer.merge(pipeJsonRender(tapped));

License

Apache-2.0