devtools

Name: devtools
Author: vercel-labs

2.1kinstalls849forks

How to install devtools?

vercel-labs/json-render/devtools

$npx -y skills add vercel-labs/json-render --skill devtools

Installs into the current project.

Summary

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 "a

Files · 1

View on GitHub

SKILL.md

1	# @json-render/devtools
2
3	A floating inspector panel for json-render apps. Framework-agnostic core + per-framework adapters (React, Vue, Svelte, Solid).
4
5	Production-safe: the component renders `null` when `NODE_ENV === "production"`.
6
7	## Install
8
9	Install the core package plus the adapter that matches the host app's renderer.
10
11	```bash
12	# React
13	npm install @json-render/devtools @json-render/devtools-react
14
15	# Vue
16	npm install @json-render/devtools @json-render/devtools-vue
17
18	# Svelte
19	npm install @json-render/devtools @json-render/devtools-svelte
20
21	# Solid
22	npm install @json-render/devtools @json-render/devtools-solid
23	```
24
25	## Drop-in usage
26
27	Place `<JsonRenderDevtools />` anywhere inside the existing `<JSONUIProvider>` (or framework equivalent). No other wiring required.
28
29	### React
30
31	```tsx
32	import { JsonRenderDevtools } from "@json-render/devtools-react";
33
34	<JSONUIProvider registry={registry} handlers={handlers}>
35	<Renderer spec={spec} registry={registry} />
36	<JsonRenderDevtools spec={spec} catalog={catalog} messages={messages} />
37	</JSONUIProvider>;
38	```
39
40	### Vue
41
42	```vue
43	<script setup>
44	import { JsonRenderDevtools } from "@json-render/devtools-vue";
45	</script>
46
47	<template>
48	<JSONUIProvider :registry="registry">
49	<Renderer :spec="spec" :registry="registry" />
50	<JsonRenderDevtools :spec="spec" :catalog="catalog" :messages="messages" />
51	</JSONUIProvider>
52	</template>
53	```
54
55	### Svelte
56
57	```svelte
58	<script>
59	import { JsonRenderDevtools } from "@json-render/devtools-svelte";
60	</script>
61
62	<JSONUIProvider {registry}>
63	<Renderer {spec} {registry} />
64	<JsonRenderDevtools {spec} {catalog} {messages} />
65	</JSONUIProvider>
66	```
67
68	### Solid
69
70	```tsx
71	import { JsonRenderDevtools } from "@json-render/devtools-solid";
72
73	<JSONUIProvider registry={registry}>
74	<Renderer spec={spec()} registry={registry} />
75	<JsonRenderDevtools
76	spec={spec()}
77	catalog={catalog}
78	messages={messages()}
79	/>
80	</JSONUIProvider>;
81	```
82
83	## Controls
84
85	- Floating toggle appears bottom-right.
86	- Hotkey: `Ctrl`/`Cmd` + `Shift` + `J` (configurable via `hotkey` prop).
87	- Drawer is resizable; height persists to localStorage.
88
89	## Props
90
91	- `spec` (`Spec \| null`) — current spec.
92	- `catalog` (`Catalog \| null`) — catalog definition; required for the Catalog panel.
93	- `messages` (`UIMessage[]`) — AI SDK `useChat` messages; scanned for spec data parts.
94	- `initialOpen` (`boolean`) — start open.
95	- `position` (`"bottom-right" \| "bottom-left" \| "right"`) — dock + toggle corner. `"bottom-*"` docks at the bottom; `"right"` docks at the right edge full-height (recommended for app-shells that already use `100vh` or fixed bottom bars).
96	- `hotkey` (`string \| false`) — `"mod+shift+j"` by default.
97	- `bufferSize` (`number`) — event ring-buffer cap, default 500.
98	- `reserveSpace` (`boolean`, default `true`) — when true the panel pushes the host app by applying `padding-bottom` / `padding-right` on `body`. Set to `false` to keep the panel as a pure overlay.
99	- `allowDockToggle` (`boolean`, default `true`) — show a toolbar button so the user can flip the panel between bottom-dock and right-dock. User choice persists to `localStorage` and overrides `position` on subsequent mounts. Pass `false` to lock the dock to `position`.
100	- `onEvent` (`(DevtoolsEvent) => void`) — optional tap.
101
102	## Panels
103
104	- Spec — element tree rooted at `spec.root`; props/visibility/events/watchers detail; integrated `validateSpec` warnings.
105	- State — every JSON Pointer path with inline edit via `store.set`.
106	- Actions — dispatched actions timeline (name, params, result/error, duration).
107	- Stream — spec patches, text chunks, token usage, lifecycle markers grouped by generation.
108	- Catalog — components + actions declared in the catalog with prop chips.
109
110	## Picker (toolbar)
111
112	The element picker is a toolbar button in the panel header (Chrome-DevTools-style), not a tab. Click it to activate pick mode, then click any rendered element in the page — selection jumps to the Spec tab with that element focused. `Esc` cancels.
113
114	## Reserved space & docking
115
116	The panel can dock at the bottom or the right edge, and by default the user can flip between the two with a toolbar button (the choice persists to `localStorage`). Set `allowDockToggle={false}` if the host app only works with one dock — the button is hidden and the dock is locked to `position`.
117
118	Pick an initial dock that fits your layout:
119
120	- Bottom dock (default) — works best for docs / marketing / content-flow sites and for app shells built with a `height

People who liked this also viewed

6 picks

Type

devtools

2.1kinstalls849forks

View on GitHub

How to install devtools?

vercel-labs/json-render/devtools

$npx -y skills add vercel-labs/json-render --skill devtools

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# @json-render/devtools
2
3	A floating inspector panel for json-render apps. Framework-agnostic core + per-framework adapters (React, Vue, Svelte, Solid).
4
5	Production-safe: the component renders `null` when `NODE_ENV === "production"`.
6
7	## Install
8
9	Install the core package plus the adapter that matches the host app's renderer.
10
11	```bash
12	# React
13	npm install @json-render/devtools @json-render/devtools-react
14
15	# Vue
16	npm install @json-render/devtools @json-render/devtools-vue
17
18	# Svelte
19	npm install @json-render/devtools @json-render/devtools-svelte
20
21	# Solid
22	npm install @json-render/devtools @json-render/devtools-solid
23	```
24
25	## Drop-in usage
26
27	Place `<JsonRenderDevtools />` anywhere inside the existing `<JSONUIProvider>` (or framework equivalent). No other wiring required.
28
29	### React
30
31	```tsx
32	import { JsonRenderDevtools } from "@json-render/devtools-react";
33
34	<JSONUIProvider registry={registry} handlers={handlers}>
35	<Renderer spec={spec} registry={registry} />
36	<JsonRenderDevtools spec={spec} catalog={catalog} messages={messages} />
37	</JSONUIProvider>;
38	```
39
40	### Vue
41
42	```vue
43	<script setup>
44	import { JsonRenderDevtools } from "@json-render/devtools-vue";
45	</script>
46
47	<template>
48	<JSONUIProvider :registry="registry">
49	<Renderer :spec="spec" :registry="registry" />
50	<JsonRenderDevtools :spec="spec" :catalog="catalog" :messages="messages" />
51	</JSONUIProvider>
52	</template>
53	```
54
55	### Svelte
56
57	```svelte
58	<script>
59	import { JsonRenderDevtools } from "@json-render/devtools-svelte";
60	</script>
61
62	<JSONUIProvider {registry}>
63	<Renderer {spec} {registry} />
64	<JsonRenderDevtools {spec} {catalog} {messages} />
65	</JSONUIProvider>
66	```
67
68	### Solid
69
70	```tsx
71	import { JsonRenderDevtools } from "@json-render/devtools-solid";
72
73	<JSONUIProvider registry={registry}>
74	<Renderer spec={spec()} registry={registry} />
75	<JsonRenderDevtools
76	spec={spec()}
77	catalog={catalog}
78	messages={messages()}
79	/>
80	</JSONUIProvider>;
81	```
82
83	## Controls
84
85	- Floating toggle appears bottom-right.
86	- Hotkey: `Ctrl`/`Cmd` + `Shift` + `J` (configurable via `hotkey` prop).
87	- Drawer is resizable; height persists to localStorage.
88
89	## Props
90
91	- `spec` (`Spec \| null`) — current spec.
92	- `catalog` (`Catalog \| null`) — catalog definition; required for the Catalog panel.
93	- `messages` (`UIMessage[]`) — AI SDK `useChat` messages; scanned for spec data parts.
94	- `initialOpen` (`boolean`) — start open.
95	- `position` (`"bottom-right" \| "bottom-left" \| "right"`) — dock + toggle corner. `"bottom-*"` docks at the bottom; `"right"` docks at the right edge full-height (recommended for app-shells that already use `100vh` or fixed bottom bars).
96	- `hotkey` (`string \| false`) — `"mod+shift+j"` by default.
97	- `bufferSize` (`number`) — event ring-buffer cap, default 500.
98	- `reserveSpace` (`boolean`, default `true`) — when true the panel pushes the host app by applying `padding-bottom` / `padding-right` on `body`. Set to `false` to keep the panel as a pure overlay.
99	- `allowDockToggle` (`boolean`, default `true`) — show a toolbar button so the user can flip the panel between bottom-dock and right-dock. User choice persists to `localStorage` and overrides `position` on subsequent mounts. Pass `false` to lock the dock to `position`.
100	- `onEvent` (`(DevtoolsEvent) => void`) — optional tap.
101
102	## Panels
103
104	- Spec — element tree rooted at `spec.root`; props/visibility/events/watchers detail; integrated `validateSpec` warnings.
105	- State — every JSON Pointer path with inline edit via `store.set`.
106	- Actions — dispatched actions timeline (name, params, result/error, duration).
107	- Stream — spec patches, text chunks, token usage, lifecycle markers grouped by generation.
108	- Catalog — components + actions declared in the catalog with prop chips.
109
110	## Picker (toolbar)
111
112	The element picker is a toolbar button in the panel header (Chrome-DevTools-style), not a tab. Click it to activate pick mode, then click any rendered element in the page — selection jumps to the Spec tab with that element focused. `Esc` cancels.
113
114	## Reserved space & docking
115
116	The panel can dock at the bottom or the right edge, and by default the user can flip between the two with a toolbar button (the choice persists to `localStorage`). Set `allowDockToggle={false}` if the host app only works with one dock — the button is hidden and the dock is locked to `position`.
117
118	Pick an initial dock that fits your layout:
119
120	- Bottom dock (default) — works best for docs / marketing / content-flow sites and for app shells built with a `height

People who liked this also viewed

6 picks

Type