Visual editing for Payload CMS live preview.
Inspired by community work on live preview tooling, but implemented as a clean-room Payload 3 plugin for Artus Engineering projects. Not affiliated with Payload's enterprise Visual Editor.
- Navigate mode: click preview content to focus the matching admin field
- Edit mode: inline editing for text, textarea, number, rich text, and upload fields
- Block toolbar: move, duplicate, delete, and insert blocks in preview
- Relation fallbacks: render placeholder data for empty relationships during editing
- Explicit field mapping via
veField()/veBlock()helpers, with optional text-match fallback - Draft autosave when exiting edit mode or after debounced inline edits
@artus-engineering/payload-visual-editor- Payload admin plugin@artus-engineering/payload-visual-editor-client- frontend SDK (/reactbindings included)
pnpm add @artus-engineering/payload-visual-editor @artus-engineering/payload-visual-editor-clientimport { payloadVisualEditor } from '@artus-engineering/payload-visual-editor'
export default buildConfig({
plugins: [
payloadVisualEditor({
collections: {
pages: {
excludeFields: ['slug'],
relationFallbacks: {
authors: { name: 'Anonymous' },
},
},
},
}),
],
})Regenerate the import map after installing:
payload generate:importmapEnable live preview on the collection:
admin: {
livePreview: {
url: ({ data }) => `/pages/${data?.slug}?payloadLivePreview=true&collection=pages`,
},
}Mount the listener once in the live-preview frontend layout:
import { VisualEditorListener } from '@artus-engineering/payload-visual-editor-client/react'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
{children}
<VisualEditorListener />
</body>
</html>
)
}Annotate editable regions explicitly:
import { veBlock, veField } from '@artus-engineering/payload-visual-editor-client/react'
<h1 {...veField('title')}>{page.title}</h1>
<section {...veBlock('layout', index, block.blockType)}>
<h2 {...veField(`layout.${index}.heading`)}>{block.heading}</h2>
</section>If your preview component re-renders on live preview updates, pause rendering while edit mode is active. Use useVisualEditorEditMode() from the client package and apply queued preview data when edit mode ends.
pnpm install
pnpm build
pnpm devDemo credentials:
- Email:
demo@artus-engineering.de - Password:
demo1234
Useful commands:
pnpm test
pnpm check
pnpm --filter @artus-engineering/visual-editor-example generate:importmapDual-license model. See LICENSE for the full text.
Noncommercial use is free under the PolyForm Noncommercial License 1.0.0. That covers personal projects, non-profits, education, research, and hobby use.
Commercial use requires a paid license from Artus Engineering. See COMMERCIAL.md.
Copyright 2026 Artus Engineering