On-Page React Editor

About

This package is the React editor UI for payload-onpage. It draws an editing overlay over a rendered page, with row toolbars, a settings panel, a dock, a preview toolbar, and field editors for text, numbers, dates, checkboxes, colors, selects, relationships, and uploads. Editors write changes back to Payload through a data source adapter, and the README describes the result as autosaved drafts. The package is framework-agnostic. The Next.js adapter in @payload-onpage/next mounts it into an App Router page, so most users will install that adapter instead of wiring this package by hand. The package has four entry points. The main entry exports the OnPageEditor component, its context hooks, the field editor registry, and the PreviewToolbar. The annotations entry is dependency-free and safe for server components. Its editable() helper returns data attributes that map DOM elements to a document ID and field path, and it returns an empty object when disabled, so public HTML stays clean. The client entry exports OnPageClient, a small component for client mode. The editor-kit entry provides the building blocks for writing custom field editors. Annotations are optional. The stega-based locators already map most text automatically, so annotations are mainly useful for images without alt text, exact layout rows, and array lists that need an add button. The package requires React 19 and Node 20.9 or later, and it depends on @payload-onpage/core for document references. It is a pre-1.0 release (0.5.0), so the API may still change.

Package info

Package name

@payload-onpage/react

Latest version

0.5.0

Unpacked size

523 kB

License

MIT

Weekly downloads

1.3k

Last publish

Oct 12, 2026