import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/api/devtools-svelte")

# @json-render/devtools-svelte

Svelte adapter for the json-render devtools. Drop-in `<JsonRenderDevtools />` component.

See the [Devtools guide](/docs/devtools) for the drop-in walkthrough.

## JsonRenderDevtools

```svelte
<script>
  import { JsonRenderDevtools } from "@json-render/devtools-svelte";
</script>

<JSONUIProvider {registry}>
  <Renderer {spec} {registry} />
  <JsonRenderDevtools {spec} {catalog} {messages} />
</JSONUIProvider>
```

### Props

Same shape as the React adapter:

- `spec`
- `catalog`
- `messages`
- `initialOpen`
- `position`
- `hotkey`
- `bufferSize`
- `onEvent`

In production builds the component renders nothing.