From the DOMStraight to your IDE
@hyperse/inspector wires your browser to local editors: press a hotkey, click a component, and open the exact file, line, and column—powered by compile-time transforms and a tiny dev-server middleware.
$ pnpm add -D @hyperse/inspector @hyperse/inspector-middlewareBuilt for fast feedback
Code Inspector removes friction between what you see in the browser and where you edit in the repo—without bolting on another heavy devtool.
Why it feels instant
Inspector reads compile-injected metadata on the selected React node, so you skip global search and file guessing.
Locate component source
Rough time to land in the right module for an unfamiliar screen (illustrative).
Chart loading…
Everything in the monorepo
Pick the packages you need—transform, middleware, UI, and Next glue—and ship a consistent “click to code” workflow across stacks.
Runtime inspector
The @hyperse/inspector React component adds hotkey-driven inspect mode, reads source metadata from the tree, and calls your dev server to launch the editor.
Dev-server bridge
@hyperse/inspector-middleware exposes createLaunchEditorMiddleware so Webpack, Vite, or Rspack dev servers can open files with launch-editor.
Next.js integration
@hyperse/next-inspector wires SWC, optional client injection, and API routes—minimal next.config changes for App Router projects.
Babel & SWC transforms
@hyperse/inspector-babel-plugin and @hyperse/inspector-swc-plugin annotate JSX during development so every inspected node carries file, line, and column.
Shared contracts
@hyperse/inspector-common centralizes launch URLs, trusted editors, and types so client, server, and plugins stay aligned.
Composable UI
@hyperse/inspector-component powers overlays and context panels you can extend while keeping the core navigation flow intact.
Ready to wire your UI to the editor?
Follow the getting-started guide, enable the transform for your bundler, and keep the middleware dev-only.