orchids-visual-edits

Visual editing components and utilities for Orchids projects using Next.js App Router.

Installation

npm install orchids-visual-edits
# or
bun add orchids-visual-edits
# or
pnpm add orchids-visual-edits

Usage

1. Add VisualEditsMessenger to your layout

// src/app/layout.tsx
import { VisualEditsMessenger } from 'orchids-visual-edits'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <VisualEditsMessenger />
      </body>
    </html>
  )
}

2. Configure Next.js to use the component tagger loader

Important: The loader uses Node.js built-ins and should only be imported in next.config.ts (server-side). Do not import it in client components.

// next.config.ts
import type { NextConfig } from 'next'
import { loaderPath } from 'orchids-visual-edits/loader'

const nextConfig: NextConfig = {
  // ... your other config
  turbopack: {
    rules: {
      '*.{jsx,tsx}': {
        loaders: [loaderPath]
      }
    }
  }
}

export default nextConfig

Package Exports

This package provides separate entry points for client and server code:

orchids-visual-edits - Client components (VisualEditsMessenger, CHANNEL)
orchids-visual-edits/messenger - Direct access to the messenger component
orchids-visual-edits/loader - Server-only loader path (use in next.config.ts only)

API

`VisualEditsMessenger`

React Client Component that handles visual editing interactions. Should be added to your root layout.

Props: None

`CHANNEL`

Constant string defining the message channel name for parent-child communication.

`loaderPath`

Path to the component tagger loader for Next.js/Turbopack configuration. Server-only - contains Node.js built-ins.

License

MIT