Description
devtools is a floating inspector panel for json-render apps, built for debugging a generative UI. In the panel you can inspect the spec tree, edit state at runtime and watch the actions that get dispatched, so you can see what the interface is doing and why. The package has a framework-agnostic core and a separate adapter for each renderer. You install the core together with the adapter for your app: @json-render/devtools with @json-render/devtools-react for React, @json-render/devtools-vue for Vue, and @json-render/devtools-svelte for Svelte. Solid also has an adapter. The component is production-safe, because it renders nothing when NODE_ENV is production, so it does not need to be removed before a release build. The skill is for requests to debug a generative UI, inspect its spec tree, edit its state or see its dispatched actions. It is installed with npx skills from the vercel-labs/json-render repository, and its security audits all pass.…
Highlights
- Floating inspector panel for json-render apps
- Inspect the spec tree
- Edit state at runtime
- Watch dispatched actions
- Renders nothing when NODE_ENV is production
Ratings & Reviews
No ratings yet
Be the first to rate devtools.
People also visit
devtools FAQ
What is the devtools package for?
Debugging a generative UI by inspecting its spec tree, editing state at runtime and watching dispatched actions.
Which frameworks are supported?
React, Vue, Svelte and Solid, each through its own adapter package.
Will the panel show up in production?
No. It renders nothing when NODE_ENV is production.
How do I install it for React?
Install @json-render/devtools and @json-render/devtools-react together.
How do I install the skill?
Run npx skills add https://github.com/vercel-labs/json-render --skill devtools.
What do the security audits show?
Gen Agent Trust Hub, Socket and Snyk all pass.
What are the best devtools alternatives?
Popular alternatives to devtools include webapp-testing, github and mcporter. See all devtools alternatives