@originmain/cli
v0.0.7
Published
Originmain CLI — reverse proxy for live React component inspection.
Readme
@originmain/cli
A reverse proxy that enables live React component inspection inside Originmain artboards.
Point it at your running dev server and paste the proxy URL into an artboard's Connect app field. From that point on, Originmain can read your component tree in real time, highlight selected components, and push design tokens into the running app — without any changes to your source code.
Requirements
- Node.js ≥ 22
- A running React dev server (Next.js, Vite, Remix, etc.)
Quick start
npx @originmain/cli dev --target http://localhost:3000The proxy starts on port 4170 by default and prints its URL:
Originmain proxy running
Target: http://localhost:3000
Proxy: http://localhost:4170
Paste the proxy URL into your Originmain artboard's
"Connect app" field to enable live rendering.
Fiber hook injection ........ active
X-Frame-Options stripping ... active
WebSocket passthrough ....... activePaste http://localhost:4170 into the artboard. Done.
Usage
originmain dev --target <url> [--port <number>]| Flag | Short | Default | Description |
|------|-------|---------|-------------|
| --target | -t | (required) | URL of your dev server — http:// or https:// |
| --port | -p | 4170 | Port the proxy listens on |
| --help | -h | | Print usage |
Examples
# Default port
npx @originmain/cli dev --target http://localhost:3000
# Custom port
npx @originmain/cli dev --target http://localhost:5173 --port 4200
# HTTPS dev server (self-signed certs are accepted)
npx @originmain/cli dev --target https://localhost:3000
# Short flags
npx @originmain/cli dev -t http://localhost:3000 -p 4200If port 4170 is already in use the CLI prints a clear error and suggests the next port:
Error: Port 4170 is already in use.
Try a different port: originmain dev --target http://localhost:3000 --port 4171What the proxy does
| Feature | Detail |
|---------|--------|
| Fiber hook injection | Inserts a small script before any other scripts in every HTML response. React detects it as a DevTools hook and reports every component commit. |
| X-Frame-Options removal | Strips X-Frame-Options and Content-Security-Policy response headers so the app can load inside the Originmain iframe. Also removes inline CSP <meta> tags that some frameworks embed in the HTML. |
| WebSocket passthrough | Forwards HMR upgrade requests directly to the dev server so hot reload keeps working. |
| HTTPS support | Accepts self-signed certificates from local HTTPS dev servers (rejectUnauthorized: false). |
| CORS headers | Appends permissive CORS headers to every response so the canvas can reach the app. |
The proxy makes no changes to your source files and stops completely when you Ctrl-C.
Global install (optional)
npm install -g @originmain/cli
originmain dev --target http://localhost:3000Programmatic API
import { startProxy, injectFiberHook } from '@originmain/cli'startProxy(options)
Starts the proxy server and returns a { close() } handle.
import { startProxy } from '@originmain/cli'
const proxy = startProxy({
target: 'http://localhost:3000',
port: 4170,
})
// Later:
proxy.close()Options
| Property | Type | Default | Description |
|----------|------|---------|-------------|
| target | string | (required) | Dev server URL |
| port | number | 4170 | Port to listen on |
injectFiberHook(html)
Injects the fiber hook <script> into an HTML string and returns the modified HTML. Useful if you are building a custom proxy or middleware.
import { injectFiberHook } from '@originmain/cli'
const modified = injectFiberHook(rawHtml)How it works
When a browser (the Originmain iframe) loads a page through the proxy, the proxy:
- Strips
X-Frame-Optionsand CSP headers so the iframe is allowed. - Buffers the HTML response and inserts the fiber hook script immediately after the opening
<head>tag — before any other scripts. - The script installs
window.__REACT_DEVTOOLS_GLOBAL_HOOK__before React evaluates, so React registers its renderer with the hook on startup. - On every React commit the hook serializes the component tree and posts it to the parent frame via
postMessage. - Artboard selection and design token updates flow back into the app through the same channel.
WebSocket connections (used by Next.js, Vite, and other bundlers for HMR) are tunnelled directly to the target server so hot reload is unaffected.
License
MIT