> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rixxui.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Devtools

> Inspect RUI source, diagnostics, snapshots, catalog definitions, and renderer events during development.

`@rixx-ui/react-devtools` connects to the public `onEvent` and `onStateChange`
callbacks. It does not connect to a provider or private Studio endpoint.

```tsx theme={null}
import { RUIDevtools, useRUIDevtools } from "@rixx-ui/react-devtools";
import "@rixx-ui/react-devtools/styles.css";
import { RUIRenderer } from "@rixx-ui/react";

function Preview({ source, status }) {
  const devtools = useRUIDevtools({ maxEvents: 200 });

  return (
    <>
      <RUIRenderer {...devtools.rendererProps} streamStatus={status}>
        {source}
      </RUIRenderer>
      <RUIDevtools
        clearEvents={devtools.clearEvents}
        events={devtools.events}
        state={devtools.state}
      />
    </>
  );
}
```

Panels show Source, Diagnostics, Snapshot, Catalog, and Events. Set `defaultTab`
to one of those names. `maxEvents` defaults to 200; set it to `0` to disable
event retention.

<Warning>
  Renderer state can contain generated source and bound data. Mount Devtools
  only in trusted development environments, and do not forward its serialized
  output to telemetry without redaction.
</Warning>