Vite-Style Apps

For Vite and other client-rendered SPA setups, bootstrap the inspector in the earliest browser entrypoint. For React that is usually src/main.tsx or src/main.jsx. For Vue that is usually src/main.ts or src/main.js.

React example

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
  bootstrapEmbeddedInspectorBridge,
} from '@iteraai/react-component-inspector';
import { bootIterationInspectorRuntime } from '@iteraai/react-component-inspector/iterationInspector';
import App from './App';

const bridge = bootstrapEmbeddedInspectorBridge({
  enabled: import.meta.env.DEV,
  hostOrigins: import.meta.env.VITE_ITERA_COMPONENT_INSPECTOR_HOST_ORIGINS,
});

bootIterationInspectorRuntime();

window.addEventListener('beforeunload', () => {
  bridge.destroy();
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Vue example

import { createApp } from 'vue';
import { bootstrapEmbeddedInspectorBridgeOnMount } from '@iteraai/vue-component-inspector';
import { bootIterationInspectorRuntime } from '@iteraai/vue-component-inspector/iterationInspector';
import App from './vue-app';

const app = createApp(App);
const bridge = bootstrapEmbeddedInspectorBridgeOnMount(app, {
  enabled: import.meta.env.DEV,
  hostOrigins: import.meta.env.VITE_ITERA_COMPONENT_INSPECTOR_HOST_ORIGINS,
});

bootIterationInspectorRuntime();

window.addEventListener('beforeunload', () => {
  bridge.destroy();
});

app.mount('#app');

CRA-style env note

In Create React App, keep the same early bootstrap location in src/index.tsx, but read from CRA's client env surface instead of import.meta.env.*.

import { bootstrapEmbeddedInspectorBridge } from '@iteraai/react-component-inspector';

const bridge = bootstrapEmbeddedInspectorBridge({
  enabled: process.env.NODE_ENV === 'development',
  hostOrigins: process.env.REACT_APP_ITERA_COMPONENT_INSPECTOR_HOST_ORIGINS,
});

window.addEventListener('beforeunload', () => {
  bridge.destroy();
});

Why this location matters

Keep the bridge bootstrap in the same early entrypoint when you want immediate inspection visibility from the start.

• For React, later startup is more likely to miss early roots or begin on a fallback path before fiber data becomes available.
• For Vue, later startup is more likely to miss the preferred explicit-registration path and fall back to DOM discovery.

Vue source metadata plugin

If you want richer Vue file, line, and column source metadata in tree snapshots, add the optional Vite plugin:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createVueInspectorSourceMetadataVitePlugin } from '@iteraai/vue-component-inspector/vite';

export default defineConfig({
  plugins: [createVueInspectorSourceMetadataVitePlugin(), vue()],
});

Keep the inspector plugin before vue() so it runs in the Vite transform pipeline before the Vue plugin consumes the module.

Without the plugin, the Vue runtime still reads best-effort metadata when Vue exposes it, but you should expect weaker parity:

• file-only metadata is common
• line numbers may fall back to 1
• column data may be unavailable

Host origins

Both bootstrapEmbeddedInspectorBridge() and bootstrapEmbeddedInspectorBridgeOnMount() accept hostOrigins as either an array or a comma-separated string, so an env var such as VITE_ITERA_COMPONENT_INSPECTOR_HOST_ORIGINS can be passed through directly.

If your app is deployed inside Itera-managed infrastructure, you usually do not need to inject that value yourself. Itera infrastructure already supplies the documented inspector env values during deployment. Manual env wiring is mainly for local development and customer-managed deployments.

If that value is empty, the bridge stays disabled even in development. Keep the runtime startup and the bridge bootstrap together so selection, tree, and highlight behavior come up as one unit.

React vite is not the preferred adapter

Using Vite does not mean a React app should switch the runtime config to adapter: 'vite'. Keep the default fiber path unless you are intentionally testing or forcing a framework-specific tag adapter.