
Devtools
Drop this in any json-render app and you get a floating inspector panel with live spec tree browsing, runtime state editing, action logs, and stream patch capture. Works across React, Vue, Svelte, and Solid with matching adapters. The element picker is Chrome DevTools style: click the toolbar button, click any rendered element, and jump straight to its spec node. Handles multi-renderer setups cleanly, so a chat with twenty assistant messages can share one devtools instance if you namespace your state paths. Auto-hides in production. The right-dock vs bottom-dock choice matters: pick right if your shell uses 100vh or fixed positioning, bottom for normal document flow.
- skills.sh installs
- 8.4K
- GitHub stars
- 19.5K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add vercel-labs/json-render --skill devtools --agent claude-codeInstalls into .claude/skills of the current project.
Files
@json-render/devtools
A floating inspector panel for json-render apps. Framework-agnostic core + per-framework adapters (React, Vue, Svelte, Solid).
Production-safe: the component renders no devtools UI when process.env.NODE_ENV === "production", including when a bundler replaces the expression in a browser without a process global. Unbundled environments without process.env retain development behavior.
Install
Install the core package plus the adapter that matches the host app's renderer.
# React
npm install @json-render/devtools @json-render/devtools-react
# Vue
npm install @json-render/devtools @json-render/devtools-vue
# Svelte
npm install @json-render/devtools @json-render/devtools-svelte
# Solid
npm install @json-render/devtools @json-render/devtools-solid
Drop-in usage
Place <JsonRenderDevtools /> anywhere inside the existing <JSONUIProvider> (or framework equivalent). No other wiring required.
React
import { JsonRenderDevtools } from "@json-render/devtools-react";
Sponsors
Details
- Repository
- github.com/vercel-labs/json-render
- Categories
- Frontend Development, Debugging, Cloud & Infrastructure
- First seen
- Jun 3, 2026
More from vercel-labs/json-render
All 31- Directives8.1K
- Mcp5.9K
- React Native3.3K
- Shadcn2.5K
- React Three Fiber2.4K
- React Pdf2.4K
- Zustand1.9K
- Remotion1.8K
- Image1.6K
- Remotion Best Practices1.6K
- Vue1.4K
- React Email1.4K
- Skill Creator1.4K
- Ink1.3K
- Svelte1.2K
- Shadcn Svelte1.2K
- Redux1.1K
- Jotai1.1K
- Xstate1.1K
- Solid1.1K
- Yaml1.1K
- Json Render React391
- Json Render Core340
- Json Render Shadcn213