Live Preview

About

Payload Live Preview brings the CMS's real-time preview iframe to server-rendered and statically generated frontends that the official React/Vue hooks cannot reach. The first-class target is Astro, with adapters for Next.js, SvelteKit, and Nuxt sharing one core runtime, plus plain HTML. Edits stream into the preview iframe as the editor types, with no rebuild or page reload. You annotate the markup you want bound with a `data-payload-field` attribute and register the adapter. The Astro integration exposes inline and middleware injection modes. Inline bakes the runtime into every page at build time, which suits `output: 'static'`. Middleware mode injects the script only into preview requests (detected via `?preview=true` or `?draft=true` query, `Sec-Fetch-Dest: iframe`, or an admin referer), so production traffic stays untouched and a `frame-ancestors` CSP directive is merged so the admin may embed the page. The runtime ships a complete Lexical renderer covering 16 node types, including upload, relationship, block, autolink, tab, indent, and RTL, with automatic rich-text detection from the value shape. For Payload 3.x, an optional `serverURL` triggers a REST merge that re-fetches populated documents so relationship and upload fields render as content rather than bare IDs. Rich text is available through a `RichText.astro` component that renders through the same renderer the runtime uses for patches, so SSR markup and preview updates cannot diverge. A `buildLivePreviewUrl` helper replaces the usual lookup-table boilerplate in `payload.config.ts`, mapping collections and globals to frontend URLs and appending `?preview=true` automatically. The `pll-codegen` CLI emits TypeScript interfaces from `payload.config.ts`, and a typed `bind<T>()` helper gives compile-time-checked field bindings. Compatibility spans Payload 2.x and 3.x, Astro 4 through 7, and Node 20.19 or later. The wire format is verified against `@payloadcms/live-preview` 3.86 with a weekly CI job watching for drift.

Package info

Package name

payload-live-preview

Latest version

1.0.3

Unpacked size

4.6 MB

License

MIT

Weekly downloads

635

Last publish

Jul 11, 2026