Visual Editing

About

This plugin connects a Next.js frontend to the Payload admin for visual editing. On the server, it adds hooks to every collection and global that are not skipped. When a draft is read for the frontend, the hooks embed invisible Vercel stega markers into string values, which record each field's path. The client overlay then scans the rendered DOM for those markers and draws an outline and an Edit badge on each editable element. Clicking a badge sends a postMessage to the admin, which focuses the matching field in the form. Enrichment only runs on draft reads made outside the admin. Published reads and the admin form itself are never touched. The frontend has to switch into draft mode through Next.js draftMode, and the README includes preview and exit routes for that. Collections need `versions: { drafts: true }`, and Live Preview has to point at the preview route. The plugin also registers a bridge provider in the admin, so the import map must be regenerated after config changes. A beforeChange hook strips intact markers from incoming writes so they never reach the database. The plugin takes several options: skipCollections, skipGlobals, excludeFieldNames, excludeValues (value-shape predicates such as URL, slug, hash, and ISO date), adminBasePath, and enrichment set to either 'auto' or 'explicit'. In explicit mode, reads must pass `context: { visualEditing: true }`. Text, textarea, and email fields are enriched automatically. richText and upload fields need the `withVisualEditingPath` helper from the client entry in the renderer, because their values are not stega-encoded inline. The package requires Payload 3.79 or newer and React 18 or 19, and Next.js is optional.

Package info

Package name

@focus-reactive/payload-plugin-visual-editing

Latest version

1.1.0

Unpacked size

324 kB

License

MIT

Weekly downloads

366

Last publish

Oct 5, 2026