devtools
Drop-in inspector panel for any json-render app. Use when the user wants to debug a generative UI, inspect the spec tree, edit state at runtime, see dispatched actions, follow stream patches live, browse a catalog, or pick DOM elements to find their spec keys. Triggers include "add devtools", "debug json-render", "inspect the spec", "why is this element not rendering", "see the state at runtime", or requests to tap…
- installs 8w
- 3,680
- 30-day movement
- starts with the next reading
- Related entries
- 1
- Connections
- 0
A drop-in inspector panel for json-render apps, provided as a SKILL.md that guides an AI agent to install and wire `@json-render/devtools`. The panel exposes panels for the spec tree, runtime state, dispatched actions, stream patches, and a catalog, plus a Chrome-DevTools-style element picker that maps DOM elements to spec keys.
Reach for it when you need to debug a generative UI — inspecting specs, editing state at runtime, or tracing why an element is not rendering.
Use it to
- Inspect the spec tree and validation warnings
- Edit runtime state via JSON Pointer paths
- Watch dispatched actions and stream patches live
- Pick DOM elements to find their spec keys
- Tap server-side streams to capture spec patches
For Developers building or debugging json-render generative UI apps
- Host repository
- vercel-labs/json-render
- Installs, lifetime
- 5,800
- Installs, 8 weeks
- 3,680
- Host stars
- 16k
- Host language
- TypeScript