orchids-visual-edits

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

Installation

``bash
npm install orchids-visual-edits


or

bun add orchids-visual-edits

or

pnpm add orchids-visual-edits
`

Usage

$3

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

export default function RootLayout({ children }) {
return (


{children}



)
}
`

$3

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.

`ts
// 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

$3

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

Props: None

$3

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

$3

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

License

MIT