payload-better-editor

KO | EN

gitlite — search

#react #typescript #go #android #rust #linux #docker #nodejs #macos #windows #awesome-list #ios #openai #open-source

payload-better-editor

(★ 82)

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

payload-better-editor Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# payload-better-editor

[![npm](https://img.shields.io/npm/v/payload-better-editor?logo=npm&color=ce421b)](https://www.npmjs.com/package/payload-better-editor)
[![downloads](https://img.shields.io/npm/dt/payload-better-editor?logo=npm&color=ce421b)](https://www.npmjs.com/package/payload-better-editor)
[![stars](https://img.shields.io/github/stars/scorpio-99/payload-better-editor?logo=github)](https://github.com/scorpio-99/payload-better-editor)

Block editor plugin for [Payload CMS](https://payloadcms.com) 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.

![Better Editor overview](https://raw.githubusercontent.com/scorpio-99/payload-better-editor/main/assets/overview.gif)

## 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.

![Inline block toolbar](https://raw.githubusercontent.com/scorpio-99/payload-better-editor/main/assets/toolbar.gif)

## 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.

![Viewport switcher and sidebar controls](https://raw.githubusercontent.com/scorpio-99/payload-better-editor/main/assets/viewports.gif)

## 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

```bash
pnpm add payload-better-editor
```

See [DEVELOPERS.md](./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](https://github.com/scorpio-99/payload-better-editor/issues/new) with steps to reproduce, your Payload version, and a minimal example. PRs welcome.

## Contributors

payload-better-editor

payload-better-editor Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

payload-better-editor

payload-better-editor Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README