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.

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.

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.