skills.rest
pch007
pch007COMMUNITY
Explore all skills by this author →
GitHub

devtools

Inspect spec trees, edit runtime state, and trace actions in json-render apps.

1|Updated Jun 19, 2026
Search Tags:#debugging#devtools#state-management#framework-adapter#json-render#spec-inspection
One-click install
npx skills add https://github.com/pch007/json-render --skill devtools-pch007
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: devtools
Source: https://github.com/pch007/json-render/tree/main/skills/devtools
Command: npx skills add https://github.com/pch007/json-render --skill devtools-pch007

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Drop-in inspector panel for json-render apps to help developers debug generative UIs by exposing runtime state, the spec tree, actions, and streams, plus element selection to locate keys.

Core Features & Use Cases

  • Inspect the spec tree and edit state at runtime.
  • See dispatched actions, follow stream patches live, browse a catalog, and tap DOM elements to locate spec keys.
  • Use cases include debugging generative UIs, validating component behavior across adapters, and troubleshooting rendering issues in development.

Quick Start

Open the JsonRender Devtools panel in your app and start inspecting the spec, state, actions, and streams.

Frequently Asked Questions about devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debug generative UIs rendered from JSON specs?▼

To debug generative UIs, you can use a drop-in inspector panel to expose the JSON spec tree, runtime state, and dispatched actions. This allows you to edit state live and validate component behavior during development.

Can I inspect and edit runtime state for json-render apps across different frameworks?▼

Yes, you can inspect and edit runtime state for json-render apps across framework adapters like React, Vue, Svelte, and Solid. The inspector is framework-agnostic and uses a shadow DOM to provide a consistent debugging experience.

What is the best way to trace actions and follow stream patches in a json-render app?▼

The best way to trace actions and view stream patches is through a ring-buffered event store that captures dispatched actions and stream updates. This allows developers to follow live stream patches and troubleshoot rendering issues.

How do I map a DOM element back to its spec key when troubleshooting rendering issues?▼

You can map DOM elements to spec keys using a built-in element picker. This feature lets you tap directly on rendered UI components to locate their corresponding keys in the spec tree for faster debugging.

Does the json-render devtools inspector require specific framework dependencies to function?▼

No, the json-render devtools inspector does not require specific framework dependencies. It operates as a framework-agnostic, drop-in UI, meaning you can integrate it into React, Vue, Svelte, or Solid apps without extra adapter setups.

Related Skills

Explore More Software Engineering Skills→
hasnahasna

devtools

Inspect and edit json-render spec trees and runtime state in-app across React, Vue, Svelte, and Solid frameworks.

Official
Advanced
brainbrewlabsbrainbrewlabs
7

code-fixing

Fix code scanner, security auditor, and linter issues with verified edits and reports.

Official
Intermediate
hasnaxyzhasnaxyz

devtools

Inspect live spec, state, actions, and stream events in json-render apps.

Official
Advanced
CKylinMCCKylinMC
103

ckui

Your AI-powered UI toolkit for building desktop-style interfaces in the browser.

Community
Intermediate