Visual editing components and utilities for Orchids projects (Next.js App Router)
npm install orchids-visual-editsVisual editing components and utilities for Orchids projects using Next.js App Router.
``bash`
npm install orchids-visual-editsor
bun add orchids-visual-editsor
pnpm add orchids-visual-edits
`tsx
// src/app/layout.tsx
import { VisualEditsMessenger } from 'orchids-visual-edits'
export default function RootLayout({ children }) {
return (
$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)React Client Component that handles visual editing interactions. Should be added to your root layout.
Props: None
Constant string defining the message channel name for parent-child communication.
Path to the component tagger loader for Next.js/Turbopack configuration. Server-only - contains Node.js built-ins.
MIT