Install packagesCopy Anchor Link

npm install @hyperse/inspector @hyperse/inspector-middleware

Pick one compile-time integration:

• Babel: @hyperse/inspector-babel-plugin
• SWC: @hyperse/inspector-swc-plugin

For Next.js, also install:

npm install @hyperse/next-inspector

Render <Inspector /> (development only)Copy Anchor Link

import { Inspector } from '@hyperse/inspector';

export function App() {
  const isDev = process.env.NODE_ENV === 'development';
  return (
    <>
      {isDev ? <Inspector /> : null}
      {/* your app */}
    </>
  );
}

Optional props include keys, active / onActiveChange, hideDomPathAttr, onInspectElement, and customLaunchEditorEndpoint. See Inspector component.

Enable the transform (dev only)Copy Anchor Link

• Babel: add @hyperse/inspector-babel-plugin when NODE_ENV === 'development'.
• SWC: register the wasm plugin under jsc.experimental.plugins for dev builds.

See Babel plugin and SWC plugin.

Register dev-server middlewareCopy Anchor Link

Use createLaunchEditorMiddleware from @hyperse/inspector-middleware on your dev server. Examples:

• Webpack
• Vite
• Rspack
• Next.js (prefer @hyperse/next-inspector)

Verify your editor CLICopy Anchor Link

Ensure code, cursor, webstorm, or your chosen CLI is on PATH, or set LAUNCH_EDITOR / EDITOR before starting the dev server.