payload-better-editor

Block editor plugin for Payload CMS that adds a side-by-side live-preview iframe and sidebar to the edit view.

Skip the giant form - pick a block, edit just that block

Open the editor from any document's edit view. The preview iframe loads your live frontend; clicking a block selects it and opens its real Payload fields in the sidebar - no schema duplication, no custom components.

Floating in-iframe toolbar

Hover any block in the preview to surface its floating action toolbar - move up, move down, duplicate, add-below, delete. All actions go through Payload's form state and are tracked by the plugin's undo/redo history.

Viewports & layout controls

Switch between Desktop, Tablet, Mobile, and Responsive (drag-resizable). The fullscreen button is independent - it puts the whole editor (preview + sidebar) into fullscreen while the iframe keeps the viewport size you picked. The sidebar itself can be drag-resized to any width or collapsed entirely to give the preview the full canvas.

Further features

• Page, Blocks, Settings tabs auto-derived from your document's tab structure
• BetterEditorSettings global so admins can change sidebar position, hover colours, tablet/mobile breakpoints, and hover-toolbar placement live - no re-deploy
• Block actions in the sidebar too - the same move / duplicate / add-below / delete actions are mirrored in the sidebar's Blocks tab, so power users don't have to reach for the iframe toolbar
• Undo and Redo with Cmd/Ctrl+Z and Cmd/Ctrl+Shift+Z - snapshot-based, covers every block mutation
• Interact mode toggle so clicks pass through to forms, accordions, links inside the preview
• Loading skeleton in the iframe and an error boundary so a single bad block can't take the admin down
• Click-to-edit works at arbitrary nesting depth - clicking a deeply nested block walks up to its innermost wrapper
• Real Payload fields in the sidebar via RenderFields, so custom field components, validations, and access control all just work

Install

pnpm add payload-better-editor

See DEVELOPERS.md for setup, plugin options, runtime settings, and architecture notes.

Requirements

• Payload >=3.81.0
• React 19

Found a bug? Early-stage plugin, feedback is appreciated. Open an issue with steps to reproduce, your Payload version, and a minimal example. PRs welcome.

Contributors