Live Nav

About

payload-live-nav adds section navigation to the Payload admin and ties it to Live Preview. On long pages you normally scroll the edit form and the preview iframe separately, hunting for the field you want. This plugin closes that gap with two pieces: a focus bridge and a page index. The focus bridge is always on. The admin side listens for focusin events and reads Payload's internal `field-<path>` DOM id scheme to learn which field you are in, then posts the path into the Live Preview iframe with `postMessage`. The frontend half, a `<LiveNavListener />` React component or a framework-agnostic `attachLiveNavListener()` call, finds the element tagged with a matching `data-cms-field` attribute, scrolls it into view, and flashes it with a gold outline. Unmatched child paths climb to their parent, so a group path like `faq` resolves through `faq.headline`. The page index is a collapsible rail on the edit views you configure. You pass an `entities` map keyed by collection or global slug, and each listed entity gets the rail listing its sections. One click scrolls the form to that group and sends the preview to the same section. Each section takes a label, a field path, and an optional `adminLabel` used as a fallback when Payload's id scheme changes. Same-origin setups only, which is Payload's default Live Preview arrangement. The focus bridge depends on Payload's internal field id scheme; if a future version changes it, the plugin degrades to a quiet no-op rather than breaking the admin, and the page index falls back to matching the group's heading text. It is tested on Payload 3.85 and untested on 4.x, whose internals may differ.

Package info

Package name

payload-live-nav

Latest version

0.1.1

Unpacked size

35 kB

License

MIT

Last publish

Aug 8, 2026