1.1 KiB
1.1 KiB
@originmain/live
Browser SDK for Originmain — installs the React fiber hook that enables live component inspection and design editing in the Originmain canvas.
Installation
npm install @originmain/live
# or
pnpm add @originmain/live
Usage
Import before React in your app entry point:
// app/layout.tsx (or pages/_app.tsx)
import '@originmain/live'; // ← must be first
import React from 'react';
// ...
Or use the @originmain/next plugin which injects it automatically:
// next.config.ts
import { withOriginmain } from '@originmain/next';
export default withOriginmain({ reactStrictMode: true });
How it works
- Installs
__REACT_DEVTOOLS_GLOBAL_HOOK__before React evaluates (module load time), so React captures fiber commits from the very first render. - Activates only when the page runs inside an Originmain artboard iframe (detected via
#__om_artboard=<id>in the URL fragment). - Complete no-op in production or any non-Originmain context — zero runtime cost.
License
MIT