@openuidev/devtools

Development-only UI widget for OpenUI apps. Renders a floating button that opens a left side drawer listing the events captured by @openuidev/observability — level, a one-line summary, and a drill-in stack trace per entry. Development only visibility is controlled by the environment flag.

Installation

CDN (via react-lang)

If your app uses @openuidev/react-lang, the widget shows up automatically in development.

Package Installation

Install the package and render <OpenUIDevtools /> when you want custom props. A manually mounted instance always wins over the auto-mount:

pnpm add -D @openuidev/devtools

OpenUIDevtools

Mount it once, anywhere in your tree. It renders nothing in production builds (NODE_ENV === "production") unless enabled is passed explicitly.

import { OpenUIDevtools } from "@openuidev/devtools";

function App() {
  return (
    <>
      {/* your app */}
      {process.env.NODE_ENV === "development" && (
        <OpenUIDevtools theme="dark" position="bottom-left" maxEvents={100} />
      )}
    </>
  );
}

Props