vercel-labs avatar

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

Installs 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
1payloadcms avatarpayloadpayloadcms/skillsUse when working with Payload projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, secur7.1Kskills.sh installs
2affaan-m avatarcoding-standardsaffaan-m/eccBaseline cross-project coding conventions for naming, readability, immutability, and code-quality review. Use detailed frontend or backend skills for framework-7Kskills.sh installs
3pixijs avatarpixijs-environmentspixijs/pixijs-skillsUse this skill when running PixiJS v8 outside a standard browser: Web Workers, OffscreenCanvas, Node/SSR, or CSP-restricted contexts. Covers DOMAdapter.set, Bro6.7Kskills.sh installs
4figma avatarfigma-generate-designfigma/mcp-server-guideUse this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma',6.4Kskills.sh installs
5testdino-hq avatarplaywright-skilltestdino-hq/playwright-skillBattle-tested Playwright patterns for writing, debugging, and scaling reliable test suites. Use when you need guidance for E2E, API, component, visual, accessib6.2Kskills.sh installs
6forcedotcom avatarplatform-custom-lightning-type-generateforcedotcom/sf-skillsUse this skill when users need to create Custom Lightning Types (CLTs) for Einstein Agent actions or structured input/output schemas. Trigger when users mention5.8Kskills.sh installs