Live Preview

Über

Payload Live Preview bringt das Echtzeit-Vorschau-Iframe des CMS auf server-gerenderte und statisch generierte Frontends, die die offiziellen React/Vue-Hooks nicht erreichen. Astro ist das bevorzugte Ziel, daneben gibt es Adapter für Next.js, SvelteKit, Nuxt und plain HTML, die alle auf derselben Core-Runtime basieren. Änderungen erscheinen im Vorschau-Iframe, sobald der Editor tippt, ohne Rebuild oder Page Reload. Das Markup wird über ein `data-payload-field`-Attribut annotiert und der Adapter registriert. Die Astro-Integration bietet Inline- und Middleware-Modus. Inline baut die Runtime zur Build-Zeit in jede Seite ein und eignet sich für `output: 'static'`. Der Middleware-Modus injiziert das Skript nur in Preview-Anfragen, erkannt an `?preview=true` oder `?draft=true`, `Sec-Fetch-Dest: iframe` oder dem Admin-Referer. Produktions-Traffic bleibt unberührt. Eine `frame-ancestors` CSP-Direktive wird zusammengeführt, damit die Admin-Oberfläche die Seite einbetten kann. Die Runtime enthält einen Lexical-Renderer für 16 Knotentypen, darunter upload, relationship, block, autolink, tab, indent und RTL. Rich-Text-Inhalte werden anhand der Datenstruktur automatisch erkannt. Bei Payload 3.x löst eine optionale `serverURL` einen REST-Merge aus, der verknüpfte Dokumente nachlädt, sodass relationship- und upload-Felder als Inhalte statt als reine IDs rendern. Für die serverseitige Ausgabe steht eine `RichText.astro`-Komponente zur Verfügung, die denselben Renderer nutzt wie die Runtime für Patches. SSR-Markup und Preview-Updates bleiben so konsistent. Ein `buildLivePreviewUrl`-Helper ersetzt das übliche Lookup-Table-Boilerplate in `payload.config.ts`, mappt Collections und Globals auf Frontend-URLs und hängt `?preview=true` automatisch an. Die `pll-codegen` CLI generiert TypeScript-Interfaces aus `payload.config.ts`. Ein typisierter `bind<T>()`-Helper sorgt für compile-time-geprüfte Feld-Bindings. Kompatibel mit Payload 2.x und 3.x, Astro 4 bis 7 und Node >= 20.19. Das Wire-Format wird wöchentlich per CI gegen `@payloadcms/live-preview` 3.86 auf Drift geprüft.

Paketinformationen

Paketname

payload-live-preview

Neueste Version

2.0.6

Entpackte Größe

10,8 MB

Lizenz

MIT

Wöchentliche Downloads

79

Zuletzt veröffentlicht

4. Okt. 2026