Inspect and edit json-render spec trees and runtime state in-app across React, Vue, Svelte, and Solid frameworks.
npx skills add https://github.com/hasna/render --skill devtools-hasna
Please help me install this Agent Skill. Skill: devtools Source: https://github.com/hasna/render/tree/main/skills/devtools Command: npx skills add https://github.com/hasna/render --skill devtools-hasna
Debugging generative UIs built with json-render is difficult with standard browser dev tools, which cannot inspect the dynamic spec tree, runtime state, or streamed generation patches produced by AI. This skill eliminates that gap by providing a dedicated inspector panel tailored to json-render applications.
Add the JsonRenderDevtools component inside your JSONUIProvider to open the interactive inspector panel for your json-render app.
High-intent search queries and answers about installing and using this skill.
To inspect a json-render spec tree, add the JsonRenderDevtools component inside your JSONUIProvider to open an interactive inspector panel. This panel reveals the hierarchical structure, props, visibility rules, and event bindings of rendered elements.
You can modify runtime state in a json-render application directly within the inspector panel. It allows you to edit any JSON Pointer state path to test UI behavior and edge cases on the fly without altering code or restarting the host app.
The json-render devtools inspector is framework-agnostic and supports React, Vue, Svelte, and Solid. It provides production-safe element picking, resizable docking, and event logging without impacting host app performance across these frameworks.
To track AI generation streams, use the inspector panel's stream and action monitoring features. It logs live spec patches, displays dispatched action logs with timing and error details, and helps debug generation issues in real time.
If a component is missing in a generative dashboard, use the inspector's element picker to select the UI element and jump to its spec entry. This lets you check the visibility conditions and runtime state to identify why it fails to render.
Standard browser dev tools cannot inspect the dynamic spec tree, runtime state, or streamed generation patches produced by AI in json-render apps. A dedicated inspector panel is required to safely monitor runtime state, action dispatch, and spec rendering.
vercel-labsTransform json-render specs into live Svelte component trees.
ajsai47Detect web performance regressions from cumulative code changes across pull requests.
hasnaxyzDefine schemas and catalogs for generating AI-driven UI specifications.
serkan-ozalInspect React components, props, and the component tree during debugging sessions.
