Inspect live spec, state, actions, and stream events in json-render apps.
npx skills add https://github.com/hasnaxyz/open-render --skill devtools-hasnaxyz
Please help me install this Agent Skill. Skill: devtools Source: https://github.com/hasnaxyz/open-render/tree/main/skills/devtools Command: npx skills add https://github.com/hasnaxyz/open-render --skill devtools-hasnaxyz
This Skill adds a floating inspector for json-render applications so you can understand why a generative UI rendered the way it did, troubleshoot live state, and verify actions and stream updates without guesswork.
Add JsonRenderDevtools inside your JSONUIProvider and pass the current spec, catalog, and messages so you can inspect state, actions, and stream patches live.
High-intent search queries and answers about installing and using this skill.
Runtime debugging of json-render applications is done by inspecting the live spec tree, editing state, and tracing dispatched actions through a floating devtools panel. This allows you to follow streamed patches as they arrive without guesswork.
Yes, json-render inspection supports React, Vue, Svelte, and Solid applications. Cross-framework adapters allow you to use the same runtime debugging, element picking, and spec validation workflow across different frontend ecosystems.
To find the spec key for a specific rendered element, use the element picker to select it directly from the page. This jumps you to its spec key, letting you browse the catalog to confirm available components and actions.
The best way to troubleshoot a malformed stream is to use a devtools panel with ring-buffered event logging to tap server-side stream events. This exposes live stream patches and validation warnings so you can trace the exact malformed payload.
Yes, the json-render inspector is designed as a production-safe devtools panel. It includes local persistence and ring-buffered event logging, allowing you to inspect live state and trace stream events safely in production environments.
vercel-labsTransform json-render specs into live Svelte component trees.
pch007Inspect spec trees, edit runtime state, and trace actions in json-render apps.
AIluffyGuide reactive state management with @iostore/store across React, Solid, Vue, and Svelte.
hasnaInspect and edit json-render spec trees and runtime state in-app across React, Vue, Svelte, and Solid frameworks.
