orchids-visual-edits
v1.0.13
Published
Visual editing components and utilities for Orchids projects (Next.js App Router)
Maintainers
rosidReadme
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-editsUsage
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 nextConfigPackage 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 componentorchids-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