Next.js plugin for Originmain — automatically injects the Originmain live SDK before React loads, enabling the canvas to inspect your component tree in real time.

Installation

npm install @originmain/next
# or
pnpm add @originmain/next

Usage

Wrap your Next.js config with withOriginmain:

// next.config.ts
import { withOriginmain } from '@originmain/next';

const nextConfig = {
  reactStrictMode: true,
};

export default withOriginmain(nextConfig);

Or in CommonJS format:

// next.config.js
const { withOriginmain } = require('@originmain/next');

module.exports = withOriginmain({
  reactStrictMode: true,
});

What it does

Prepends import '@originmain/live' to every page entry point at build time via webpack entry modification.
The live SDK installs __REACT_DEVTOOLS_GLOBAL_HOOK__ before React's module body evaluates — this is required for React to capture component commits.
The hook activates only when the page runs inside an Originmain artboard iframe. In all other contexts it is a complete no-op with zero runtime cost.

Requirements

Next.js >=14.0.0
Node.js >=18

License

MIT