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.

Here's my site
https://replay.jp**Just launched so hopefully the server doesn't go down or anything.

I own a small development & marketing company in Tokyo. My old site used WordPress, English-only, hosted on Google Cloud. I wanted to rebuild it completely in Japanese, not migrate, do a completely fresh start. I'm a solo developer(In my own company) so I built a structured multi-AI workflow using Claude, ChatGPT, & Codex where each one handles what it's best at. I tried doing this one year ago & was unsuccessful. I started again in February concentrating on past mistakes & making a dedicated framework that actually works.
About 3 months from first commit to live production at replay.jp.

I wanted to also make a domain portfolio which I could point all my .jp domains to.

Started prototyping with SQLite because it was easy — worked great locally but couldn't deploy. Switched to Postgres and my AI agents helped figure out the deployment chain. ChatGPT and Codex were the biggest help on the infrastructure side.
Before I built this workflow last year was painful — AI would write code that looked good but had build errors. It would code for the wrong Next.js version. Context would get too big mid-conversation and the next chat would lose all memory of what we were doing. I spent more time fixing AI mistakes than building. The workflow I built this year solved all of that.
~30 milestones from first design to production — each one had set goals, checkpoints, and mandatory checks. We didn't move forward unless the code was error-free, build passed, and types were clean. If a milestone scope got too large it was split into segments so context stayed manageable.
Planning is built into the system but not Plan Mode — I do planning separately within the workflow so plans are persistent files, not just chat context. When a milestone ships the system moves plans from active to archived. Next session picks up exactly where we left off.
Each AI tool has different strengths — Claude Code is fast at writing code but struggled with deployment. ChatGPT was better at diagnosing infrastructure problems. Codex writes better Japanese content and won a blind content bake-off. The framework routes each task to the right tool.
Built a seeding system for content — I can tear down and rebuild the entire site from scratch and all content comes back. As I add new content through the AI workflow it updates the seed so nothing is ever lost. My base content is always in the code.
Wrote all Japanese content from scratch — didn't port old English content. Used Codex to generate 48 domain listings, service pages, SEO metas, and OG descriptions. Every domain has a unique description — no copy-paste across the portfolio.
Built admin tools so I never touch code for content updates — CSV upload directly in the admin dashboard for bulk domain imports, price updates, domain sets, and videos. Just upload a file and click submit.
Moved hosting from Google Cloud to Hetzner + Coolify + Cloudflare — cheaper and I control everything. Coolify handles deployments, Cloudflare handles CDN and DNS. Set up email authentication, Google Analytics, Tag Manager, and Search Console all in the same push.
Utilized Claude Code MCP to minimize copy-paste between AIs — the agents can read project files directly through MCP servers instead of me pasting code back and forth. Also connected Payload CMS as a read-only MCP so the AI can verify what's actually in the database.
Git safety is built in — the AI creates feature branches and does all the work there. I do the final pushes and merges myself. There's a hook that blocks the AI from pushing directly to main. Nothing goes to production without me clicking the button.

Context management was the hardest problem to solve — AI conversations lose context fast on a big project. My workflow keeps each milestone focused with clear scope so the AI doesn't drift. Session handoff docs capture everything a new session needs to continue. No more "start from scratch every chat."

Whole bunch of addons created: UTMs on links from the backend, Japanese text cuts off at the right places, Japanese dates & number shortener, JP currency, & number shortening for Japanese, Custom menu emphesizing on both mobile & desktop, cool search bar I designed & updated search listings.

(Had some help organizing the points so I don't ramble)
Thank you Payload team, the site is optimized for Japanese by me as I built a few tweaks that generally matter here.

**My workflow has both production site: replay & staging site initially my Hertzer server was too small so it crashed.

3 months work hope it doesn't crash.