Inspector Overview

The component inspector is optional, but it is the recommended add-on when your team wants component-level visibility inside a supported React or Vue app embedded by the hosted Itera editor. Start with the required platform integration, then add the inspector when you need richer tree, props, highlight, snapshot, and element-selection support.

What you are adding

The inspector integration has two startup pieces:

• The embedded bridge handles trusted host messaging, tree inspection, prop serialization, node highlighting, and snapshot requests.
• The iteration runtime handles element selection on the itera:iteration-inspector channel and emits runtime_ready after it starts in an embedded page, or when allowSelfMessaging: true is enabled.

You normally start both during app startup.

Preferred paths

The preferred startup contract depends on the framework:

• React: use the standard embedded bootstrap path first. bootstrapEmbeddedInspectorBridge() and initDevEmbeddedInspectorBridge() default to runtimeConfig: { adapter: 'fiber' }, which is the current preferred React path.
• React Storybook: use the dedicated Storybook relay plus preview bootstrap when the debugger loads a Storybook manager URL. Direct iframe.html preview URLs remain supported as a fallback path.
• Vue: prefer explicit mounted-app registration. bootstrapEmbeddedInspectorBridgeOnMount(...) and registerVueAppOnMount(...) should run before or immediately around app.mount(...). Mounted-app DOM discovery is fallback behavior, not the primary contract.

Timing requirement

Initialize the inspector as early as possible, ideally before the app becomes interactive:

• In Next.js React apps, place the bootstrap in instrumentation-client.ts.
• In Vite-style React and Vue apps, bootstrap in the browser entrypoint before React becomes interactive or before or immediately around Vue app.mount(...).
• In Nuxt Vue apps, bootstrap from a client-only plugin that runs in the browser before the Nuxt app mounts.

That early timing matters because React installs the inline DevTools backend hook used by the preferred fiber path, and Vue wants explicit app registration in place as the mounted app becomes available to the bridge.

Read this section in order

1. Follow the React integration guide if your embedded app is React.
2. Use the Storybook integration guide when a React app should be debugged from the Storybook manager URL.
3. Follow the Vue integration guide if your embedded app is Vue 3.
4. Use the Next.js guide for React apps with instrumentation-client.ts.
5. Use the Vite-style guide for entrypoint timing, Vue Vite integration, and the optional source-metadata plugin.
6. Check troubleshooting when bootstrap timing, host origins, discovery, or runtime readiness go wrong.