npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

payload-better-editor

v1.2.2

Published

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

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

scorpio-99scorpio-99

Keywords

payloadpayloadcmspayload-pluginpayload-cms-plugineditorlive-editorlive-previewvisual-editorinline-editorblock-editorblockspage-buildercontent-editorclick-to-editiframecmsheadless-cmsreactnextjs

Readme

payload-better-editor

npm downloads stars

Block editor plugin for Payload CMS 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

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

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

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

pnpm add payload-better-editor

See 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 with steps to reproduce, your Payload version, and a minimal example. PRs welcome.

Contributors