# Devtools Solid

> SolidJS adapter for the json-render devtools inspector.

SolidJS adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot @json-render/devtools-solid in a SolidJS json-render app, including spec inspection, state editing, action and stream timelines, catalog browsing, or DOM picking.

- Page: https://ss33.ai/skills/vercel-labs/devtools-solid-65581307994
- Publisher: vercel-labs
- Category: [Software Development](https://ss33.ai/skills/category/software-development-t44z8z) › [Developer docs & tooling](https://ss33.ai/skills/category/software-development-t44z8z/developer-docs-and-tooling-nich6w)
- License: Apache-2.0
- Source: https://github.com/vercel-labs/json-render/blob/72568f990e5502c4d3115691facb8ca928a5c9fc/skills/devtools-solid/SKILL.md

## Skill

SKILL.md: https://ss33.ai/api/v1/ss33/download/vercel-labs/devtools-solid-65581307994

# @json-render/devtools-solid

SolidJS adapter for the json-render devtools panel. Read `skills/devtools/SKILL.md` for the shared panel capabilities, props, docking behavior, and server-side stream taps.

## Install

```bash
npm install @json-render/devtools @json-render/devtools-solid
```

## Mount the panel

Mount `JsonRenderDevtools` inside the existing SolidJS json-render provider:

```tsx
import { JsonRenderDevtools } from "@json-render/devtools-solid";

<JSONUIProvider registry={registry}>
  <Renderer spec={spec()} registry={registry} />
  <JsonRenderDevtools
    spec={spec()}
    catalog={catalog}
    messages={messages()}
  />
</JSONUIProvider>;
```

The component renders nothing in production builds. The panel provides the shared devtools controls, including the `Ctrl`/`Cmd` + `Shift` + `J` shortcut. Keep server-side stream instrumentation in `@json-render/devtools`.