Vite plugin suite for MitM integration: source tracking, visual editing, theme preview, iframe navigation, and server configuration
npm install mitm-taggerbash
pnpm add -D mitm-tagger
`
Usage
$3
`typescript
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { mitmTagger } from 'mitm-tagger';
export default defineConfig({
plugins: [
react(),
...mitmTagger()
]
});
`
$3
`typescript
import { mitmTagger } from 'mitm-tagger';
export default defineConfig({
plugins: [
react(),
...mitmTagger({
jsxSource: true, // JSX source tracking (default: true)
virtualOverrides: true, // Virtual file overrides (default: true)
visualEditor: true, // Visual editor support (default: true)
iframeNavigation: true, // Iframe navigation events (default: true)
themeBridge: true, // Theme preview bridge (default: true)
})
]
});
`
$3
`typescript
import {
createJsxSourcePlugin,
createVirtualOverridesPlugin,
createVisualEditorPlugin,
createIframeNavigationPlugin,
createThemeBridgePlugin
} from 'mitm-tagger';
export default defineConfig({
plugins: [
react(),
createJsxSourcePlugin({ extensions: ['.tsx'], exclude: ['node_modules'] }),
createVisualEditorPlugin(),
createThemeBridgePlugin(),
// ... only the plugins you need
]
});
`
Features Detail
$3
Intercepts react/jsx-dev-runtime to attach source location metadata to DOM nodes via a Symbol. This enables the Visual Editor to map selected elements back to their source code.
`javascript
// How it works:
// Every React element gets a Symbol attached with source info
element[Symbol.for('__mitmSource__')] = {
fileName: '/src/components/Button.tsx',
lineNumber: 42,
columnNumber: 8
};
`
$3
Allows MitM-App to send temporary file modifications via WebSocket. Changes are applied in-memory and trigger HMR without writing to disk.
WebSocket events:
- mitm:override - Apply temporary file override
- mitm:clear-override - Clear override for a file
- mitm:clear-all-overrides - Clear all overrides
$3
Injects a script that enables:
- Element highlighting on hover
- Element selection with visual overlay
- Live style preview via inline styles
- Communication with parent window via postMessage
Message types (to parent):
- VISUAL_EDITOR_ELEMENT_SELECTED - Element was selected
- VISUAL_EDITOR_ELEMENT_DESELECTED - Selection cleared
- VISUAL_EDITOR_HOVER - Element being hovered
Message types (from parent):
- VISUAL_EDITOR_ACTIVATE - Enable selection mode
- VISUAL_EDITOR_DEACTIVATE - Disable selection mode
- VISUAL_EDITOR_PREVIEW_STYLE - Preview styles on element
- VISUAL_EDITOR_RESTORE_STYLE - Restore original styles
$3
Notifies MitM-App when navigation occurs within the iframe:
- Intercepts history.pushState and history.replaceState
- Listens for popstate events
- Sends IFRAME_NAVIGATION messages to parent
- Receives NAVIGATE_TO commands from parent
$3
Enables real-time theme preview:
- Captures original CSS variable values
- Applies theme colors with proper HSL wrapping
- Supports both base (--background) and color-prefixed (--color-background) variables
- Handles radius variables separately
Message types (from parent):
- PREVIEW_THEME - Preview theme without persisting
- RESTORE_THEME - Restore original CSS variables
- APPLY_THEME - Apply and persist theme
Message types (to parent):
- THEME_BRIDGE_READY - Bridge initialized
- THEME_APPLIED - Theme was applied
Server Configuration
MitM requires specific CORS and CSP settings to work properly inside iframes. The package exports pre-configured server settings:
$3
`typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import path from 'path';
import { mitmTagger, mitmServerConfig } from 'mitm-tagger';
export default defineConfig({
plugins: [
react(),
...mitmTagger()
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
server: mitmServerConfig,
preview: mitmServerConfig,
});
`
$3
If you need to add custom domains to the allowed origins:
`typescript
import { mitmTagger, createMitmServerConfig } from 'mitm-tagger';
const serverConfig = createMitmServerConfig({
additionalOrigins: ['https://my-custom-domain.com'],
additionalHosts: ['.my-custom-domain.com'],
port: 3000, // optional, defaults to 80
});
export default defineConfig({
plugins: [react(), ...mitmTagger()],
server: serverConfig,
preview: serverConfig,
});
`
$3
| Setting | Value |
|---------|-------|
| Host | 0.0.0.0 |
| Port | 80 |
| CORS Origins | app.nttmitm.com, app.dev.nttmitm.com, app.mitm.local, localhost:* |
| CORS Methods | GET, POST, PUT, DELETE, OPTIONS |
| CORS Headers | Content-Type, Authorization |
| CSP frame-ancestors | Same as CORS origins |
| Allowed Hosts | .azurecontainerapps.io, .nttmitm.com |
MitM-Starter Integration
With mitm-tagger, your vite.config.ts becomes minimal:
`typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import path from 'path';
import { mitmTagger, mitmServerConfig } from 'mitm-tagger';
export default defineConfig({
plugins: [react(), ...mitmTagger()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
server: mitmServerConfig,
preview: mitmServerConfig,
});
`
No need for separate plugin files or manual CORS/CSP configuration - everything is included in mitm-tagger.
Development
`bash
Install dependencies
pnpm install
Build
pnpm build
Watch mode
pnpm dev
`
Publishing
`bash
Build and publish
pnpm build
npm publish
``