41 lines
1.1 KiB
Markdown
41 lines
1.1 KiB
Markdown
# @originmain/live
|
|
|
|
Browser SDK for [Originmain](https://originmain.com) — installs the React fiber hook that enables live component inspection and design editing in the Originmain canvas.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install @originmain/live
|
|
# or
|
|
pnpm add @originmain/live
|
|
```
|
|
|
|
## Usage
|
|
|
|
Import **before React** in your app entry point:
|
|
|
|
```ts
|
|
// app/layout.tsx (or pages/_app.tsx)
|
|
import '@originmain/live'; // ← must be first
|
|
import React from 'react';
|
|
// ...
|
|
```
|
|
|
|
Or use the [`@originmain/next`](https://www.npmjs.com/package/@originmain/next) plugin which injects it automatically:
|
|
|
|
```ts
|
|
// 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
|