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.