---
title: "Live Preview — Frontend Integration Guide"
aliases: [live-preview-frontend, payload-live-preview-frontend]
tags: [payloadcms, live-preview, react, next.js, vue, nuxt]
sources: [raw/live-preview__frontend.md]
created: 2026-05-15
updated: 2026-05-15
---

# Live Preview — Frontend Integration Guide

Entry point for adding Payload Live Preview to your frontend app. Pick an approach based on Server Component support.

## Decision Tree

```
Does your framework support Server Components?
├── Yes (Next.js App Router, etc.)
│   └── → Use Server-Side Live Preview (recommended)
└── No (Pages Router, Vue, Nuxt, SPA)
    └── → Use Client-Side Live Preview
```

## Server-Side (Recommended)

- **Package:** `@payloadcms/live-preview-react`
- **How it works:** Admin Panel sends a `postMessage` on save/autosave → frontend calls `router.refresh()` → Server Components re-fetch from Payload with latest draft
- **Simpler setup** — no hook in every page component
- **More performant** — only refreshes on save, not every keystroke
- See [[wiki/payloadcms/live-preview|Live Preview — Full Reference]] for the `RefreshRouteOnSave` pattern

## Client-Side

- **Packages:** `@payloadcms/live-preview-react` (React), `@payloadcms/live-preview-vue` (Vue/Nuxt), `@payloadcms/live-preview` (framework-agnostic)
- **How it works:** `useLivePreview` hook subscribes to `postMessage`, merges incoming data into local state on every keystroke
- **Gotcha:** `depth` in the hook must match the depth used in the initial server fetch
- See [[wiki/payloadcms/live-preview-client|Live Preview — Client-Side]] for the full `useLivePreview` API

## Package Summary

| Scenario | Package |
|---|---|
| React (any) | `@payloadcms/live-preview-react` |
| Vue 3 / Nuxt 3 | `@payloadcms/live-preview-vue` |
| Custom / framework-agnostic | `@payloadcms/live-preview` |

## Key Takeaways

- **Prefer server-side** if you're on Next.js App Router — it's simpler and more performant
- Client-side works for any JS framework via `useLivePreview` hook
- Both approaches rely on `window.postMessage` from the Admin Panel iframe
- Admin Panel config (`admin.livePreview`) is shared — the frontend pick is independent of the Payload config

## Related

- [[wiki/payloadcms/live-preview|Live Preview — Full Reference]] — Payload config, breakpoints, dynamic URL, all gotchas
- [[wiki/payloadcms/live-preview-client|Live Preview — Client-Side]] — `useLivePreview` hook API and base package

## Sources

- `raw/live-preview__frontend.md` — Payload CMS docs: "Implementing Live Preview in your frontend"
