orchids-visual-edits

Visual editing components and utilities for Orchids projects.

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'
// Alternative: import VisualEditsMessenger from 'orchids-visual-edits/messenger'

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

Note: If you encounter a "useState only works in Client Components" error, try importing directly from the /messenger path:

import VisualEditsMessenger from 'orchids-visual-edits/messenger'

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

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

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

export default nextConfig

API

`VisualEditsMessenger`

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

`loaderPath`

Path to the component tagger loader for Next.js/Turbopack configuration.

License

MIT