Not a mockup. Not a screenshot. Every artboard is a real iframe render of your actual component tree — running your real code, connected to your real data.
A lightweight runtime bridge connects your running app to the Originmain canvas with no build step required.
Paste any URL from your running app. Originmain opens it as an iframe-backed artboard in the canvas.
A lightweight script injects into the iframe and hooks into React's fiber tree — reading every component's props, state, and DOM rect.
The fiber tree streams to the host via postMessage. The canvas renders selection overlays and prop inspectors in real time.
Click any component. Change a prop in the inspector. The iframe re-renders instantly — no round-trips, no rebuild.
Every artboard runs your actual React components in a sandboxed iframe. Your real styles, your real tokens, your real data — all visible and editable from the canvas.
Click any component in the canvas — the inspector populates with its live props. Change a value and the iframe re-renders in under 16ms. All edits accumulate into an Intent Diff automatically.
No proprietary runtime. No custom compiler. Live Artboard works with any React app — any version, any bundler, any framework.
Each artboard runs in a sandboxed iframe with allow-scripts allow-same-origin. Your app runs in full isolation — Originmain never modifies your code.
A lightweight script hooks into React's internal fiber tree via __REACT_DEVTOOLS_GLOBAL_HOOK__ — the same API used by React DevTools. Works with React 16.8+.
Fiber tree updates stream from the iframe to the host canvas via a typed postMessage protocol. Messages are validated with a shared artboard ID so multiple artboards never cross-contaminate.
ProtocolEvery component's bounding rect is captured on mount and update. This drives the selection overlay, hover highlights, and resize handles — all pixel-accurate to the live render.
PrecisionNo Babel plugin, no webpack loader, no custom babel config. Paste any URL — dev server, staging, or production — and the artboard renders immediately.
Zero frictionWhen the iframe is cross-origin, the renderer can include the hook script directly via a small npm package. Same protocol, same canvas experience — no compromise on security.
FlexibilityThe real-time component tree is the foundation for every other Originmain feature.
Early access is free. Connect your first artboard in under two minutes.