I built a side-by-side block editor for Payload. Feedback and testers welcome.

[scorpio-99]

Hey everyone,

I spent the last couple of weeks building a new Payload plugin: payload-better-editor.

Quick context: Payload's default edit view is fine for small pages, but once a page grows (lots of blocks, or nested ones like rows, columns, tabs, accordions inside accordions), the form turns into a long collapsed list and you lose track of which row maps to what on the actual page. Live Preview helps, but it only shows you the result.

Back in February I built payload-better-preview as a first attempt. It synced the admin form and the preview both ways: hover a block to see it highlighted, click a block in the preview to scroll its row in the form, click a row to scroll to the block. Nice for navigation, including nested and Lexical blocks. Still felt like a band-aid, since you were scrolling through the same long form.

Eventually I wanted something different: an editing surface where the preview is the canvas and the fields sit in a sidebar next to it. That became payload-better-editor.

What it does

• Side-by-side overlay you toggle on any document: live-preview iframe on the left, sidebar on the right
• Sidebar renders the real Payload fields via RenderFields, so custom components, validation, access control and conditional logic all just work
• Click a block in the preview, it's selected in the sidebar
• Inline block actions (move, duplicate, add-below, delete) in both the preview and the sidebar
• ...and a few more things (viewport switcher, undo/redo, drag-resizable sidebar, runtime-tunable settings global...)

Feedback is very welcome.

I only tested it on my own projects so far where it ran well, but real-world testing across more varied setups would help a lot. Bug reports, missing features, "why didn't you just X", all welcome. If you find it useful, a star on the repo would be really nice too.

[hardikkaurani]

This is a genuinely interesting direction for improving Payload’s editing experience, especially for content-heavy projects.

One of the biggest pain points with deeply nested block structures is the disconnect between the form representation and the actual rendered page layout. Once pages start using rows, tabs, accordions, reusable blocks, or complex compositions, the default stacked admin form becomes difficult to navigate efficiently.

The side-by-side synchronization approach solves a real usability problem rather than just being a visual enhancement.

A few things that stand out technically:

• Bi-directional syncing between preview and form navigation is extremely valuable for large documents.
• Highlighting corresponding blocks creates much better spatial awareness inside deeply nested schemas.
• Using the rendered preview as the primary navigation surface feels closer to modern visual CMS workflows while still preserving Payload’s schema-driven architecture.
• The approach seems especially useful for teams working with landing pages, marketing builders, or highly composable layouts.

One thing that would make this even stronger long-term would be handling performance carefully for very large documents:

• virtualized rendering
• debounced sync events
• selective block hydration
• efficient nested node tracking

because real-world Payload projects can easily reach hundreds of nested fields/blocks.

Overall, this feels less like a small plugin and more like a meaningful editor UX layer on top of Payload’s existing admin system. Definitely a promising direction.

[vesters]

Looks really cool!

[Zmove]

Do you know if it can be tested on payload 4 beta ?

[scorpio-99]

No sorry, I haven’t tried it yet because I wanted to wait for the official launch. It’s definitely on my todo list, but I’m not quite sure when it’ll happen.

[Zmove]

Just tested and prompted claude to make adjustements for payload 4, works great and the process was easy, I think it will not be an hard thing to port it to 4.

Really nice integration. As already said, it's a far better visual builder than default preload one (dont understand why form / preview correspondance is not core 😮)

If I want to find a small thing to suggest I could say 2 things that would make the experience even better :

• Be able to edit global sections like header and footer by clicking on it, and get the corresponding form on the right side.
• Be able to click on a specific field, and get the field pre-selected in the block on the right which can bring additionnal comfort if the form section is very long itself