Adding a visual editor to Payload CMS
We built this plugin so editors can lay out pages in Payload and make changes directly on the website. Developers define the available components, their settings and how they render on the frontend.
Edit in the admin or on the page
Widget mode in the admin
Widget mode puts Page Composer inside a Payload content field. Editors can drag components into place and change their text, images and styles, then save or publish using the usual Payload controls. The editor runs directly in the admin page, without an iframe.
Visual editing on the frontend
Users with editing access can also open Live mode on the website. This lets them see changes alongside the site’s actual header and footer. They can save a draft or publish from there. Both modes edit the same content.
Choose what editors can work with
Each component has its own field configuration and frontend renderer. You can combine text, rich text, images, dropdowns, repeaters and grouped settings to suit the content. The configuration determines what appears in the editor; the renderer determines how it looks on the site.
For example, a Header hero might need just an image, a title and a subtitle. If the design later needs a link or a background colour, those can be added to the component’s settings.
What else the plugin handles
Templates and presets
Save a whole layout as a template, or save one component’s settings as a preset. Editors can reuse them instead of setting up each page from scratch.
Desktop, tablet and mobile styles
Spacing, typography and layout can be adjusted for each screen size. These settings are used when rendering the published page.
Payload’s existing tools
Content is stored in a Payload JSON field and works with its media library, drafts, versions and access rules. The field can be added to collections or globals, so its use is not limited to pages.
Page Composer for Payload CMS
Plugin details, pricing and source code for the integration.