Start

opt-devtool

A devtools layer that consolidates the development-time diagnostic experience for opt-ui, opt-datagrid, opt-editor, and opt-shell inside a single global overlay — including the built-in opt-ui debugger.

reopt designUpdated Nov 1, 2026

Engineers inspecting development state without changing product codeopt-devtool

Development overlays, opt-ui debugger migration, DataGrid, Editor, and harness bridges, and cross-module inspection.

Global development overlay and hotkeyFocus, tab order, and spatial inspectionGrid, editor, and harness snapshot bridgesDevelopment debugging workflows

Setup

Skill support status

There is no dedicated opt-devtool installer yet. Configure the development dependency, production guard, and required engine bridges with the manual steps below.

The package commands below are the manual fallback when a skill is unavailable or you need to control every setup step. Review the skill source and current support.

bash

bun add -D @reopt-ai/opt-devtool

1. Why it's a separate package

opt-devtool is not UI exposed to the product runtime — it's the devtool layer used to read state and verify boundaries while building each opt module in the design project. The debugger that used to live inside opt-ui moved here so a single mounted overlay can host per-module snapshot tabs together.

Built-in opt-ui debugger

Ships with default tabs for focus tracing, tab order, spatial navigation, and composite bounds.

Plugin registry

opt-datagrid, opt-editor, brandapp, opt-shell, and theme bridges register per-page snapshots in the same overlay. editor and brandapp get dedicated top-level tabs.

Development-only runtime

It is not part of the production product UI — its purpose is to help diagnose causes, verify contracts, and inspect workflows during development.

2. Root mount

Wrap the registry with OptDevtoolProvider at the app root, and render OptDevtool once in development mode. Each screen then registers its own tab via a bridge hook.

tsx

import { OptDevtool, OptDevtoolProvider } from "@reopt-ai/opt-devtool";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <OptDevtoolProvider>
          {children}
          {process.env.NODE_ENV === "development" ? <OptDevtool /> : null}
        </OptDevtoolProvider>
      </body>
    </html>
  );
}

3. Entrypoints and bridges

Import the root overlay from @reopt-ai/opt-devtool, and import engine bridge hooks from subpath exports. The package exports datagrid, editor, brandapp, harness, theme, and ui as separate entrypoints.

tsx

import { OptDevtool, OptDevtoolProvider } from "@reopt-ai/opt-devtool";
import { OPT_DEVTOOL_CONFIGURE_EVENT } from "@reopt-ai/opt-devtool/ui";
import { useDataGridDevtoolBridge } from "@reopt-ai/opt-devtool/datagrid";
import { useEditorDevtoolBridge } from "@reopt-ai/opt-devtool/editor";
import { useBrandappDevtoolBridge } from "@reopt-ai/opt-devtool/brandapp";
import { useShellDevtoolBridge } from "@reopt-ai/opt-devtool/harness";
import { useThemeDevtoolBridge } from "@reopt-ai/opt-devtool/theme";

4. Overlay surface

Area	Role
opt-ui	Traces the focused element, component chain, tab order, event log, and spatial candidates.
DataGrid	Exposes active cell, selection, editing state, visible region, history, and draft errors as snapshots.
Editor	Reads spec version, selection IDs and types, root and element count, undo/redo, focus target, external stream, and state store key count.
Brandapp	Exposes Brandapp ID, masked client ID, auth/env/EAV/AI state, and route wiring as snapshots.
Harness	Shows manifest, density, content width, state boundary, and adapter chrome state per page shell.
Theme	Consumes Shell theme events and displays preset/generated tokens, seed palette, and contrast pairs.

5. Next docs

Debugging Guide

Inspect the Ctrl+Shift+F overlay, focus tracing, tab order, and spatial navigation.

Usage Playbook

Choose the right tabs and snapshots for common development debugging tasks.

Bridge Integration

Connect opt-datagrid, opt-editor, and opt-shell snapshot bridges to your pages.