abbox-inspector
Runtime visual inspection for instrumented React/Next.js previews. Used by Abbox Viewer (Live Preview workspace) and embeddable in authorized preview apps.
Local development
cd abbox-inspector
npm install
npm run ci
Example preview (port 5174)
npm run example:dev
With Abbox Viewer
# terminal 1
cd abbox-inspector && npm run example:dev
# terminal 2
cd abbox-viewer && npm install && npm run dev
Load compiler + interpreter JSON in the viewer, open Live Preview, enable Inspect, click elements in the iframe.
Query parameters on the preview URL:
abboxSession— must match the viewer session id (defaultlocal-dev)abboxHostOrigin— viewer origin allowed to control inspect mode
Package exports
| Import | Purpose |
|---|---|
abbox-inspector | Protocol, host/client bridges, IR match helpers, Babel plugin |
abbox-inspector/runtime | bootstrapInspectorPreview() for preview apps |
abbox-inspector/vite | Optional Vite transform plugin |
Instrumentation
Build-time Babel plugin adds data-abbox-src="relative/path.tsx:line:column" to JSX opening tags. Paths are relative to the project root; no absolute filesystem paths are emitted.
Onlook
Onlook was reviewed for overlay and instrumentation patterns. This package is a small standalone implementation (Apache-2.0); no code was copied wholesale.
See docs/architecture.md and docs/integration.md.