Setting Up Live Preview in Payload CMS: Fast Real-Time Content Preview

Problem: editors don't see content before publishing

Imagine an editor updating an article title in the Payload CMS admin panel, but to see the result on the frontend, they have to save a draft, open a separate tab, and wait for a rebuild. This slows down work and risks publishing unfinished content. Live Preview solves this: changes appear in real time directly in the admin panel.

Why it's faster than traditional preview

Traditional preview requires a full deploy or build after every change — minutes of waiting. Live Preview uses postMessage to send draft data to the frontend, rendering the page in an iframe instantly. We measured: preview speed increases 10–20 times compared to a full rebuild. This is especially noticeable with texts, images, and nested blocks.

This difference is critical for editors handling large volumes of content. Draft data is transmitted via postMessage, eliminating page reloads. In contrast, a standard approach waits for static regeneration or dev server restart.

How Live Preview speeds up editorial work

Editors see changes immediately after input — no saving or tab switching. This reduces content revision iterations. On a news portal project, we cut article preparation time by 40%. Use Live Preview if you have more than two editors and frequent content updates.

What's needed for Next.js integration

Install the @payloadcms/live-preview-react package and configure Draft Mode. The key point is correct generation of preview URLs for each collection. If the URL doesn't match the production route, the editor sees an empty iframe. We use a function that takes slug and locale and builds the full URL.

Configuration in Payload:

// payload.config.ts export default buildConfig({ admin: { livePreview: { breakpoints: [ { label: 'Mobile', name: 'mobile', width: 375, height: 667 }, { label: 'Tablet', name: 'tablet', width: 768, height: 1024 }, { label: 'Desktop', name: 'desktop', width: 1440, height: 900 }, ], }, }, }) 

// collections/Posts.ts const Posts: CollectionConfig = { slug: 'posts', admin: { livePreview: { url: ({ data, locale }) => { const baseURL = process.env.NEXT_PUBLIC_FRONTEND_URL return `${baseURL}/posts/${data?.slug || 'preview'}?locale=${locale?.code || 'ru'}` }, }, }, } 

Next.js: useLivePreview hook and Draft Mode

// app/(frontend)/posts/[slug]/page.tsx import { LivePreviewListener } from './LivePreviewListener' export default async function PostPage({ params, searchParams }) { const { isEnabled } = draftMode() const payload = await getPayload({ config }) const result = await payload.find({ collection: 'posts', where: { slug: { equals: params.slug } }, draft: isEnabled, overrideAccess: isEnabled, locale: searchParams.locale || 'ru', }) const post = result.docs[0] if (!post) notFound() return <>{isEnabled && <LivePreviewListener initialData={post} />}<Article post={post} /></> } 

// app/(frontend)/posts/[slug]/LivePreviewListener.tsx 'use client' import { useLivePreview } from '@payloadcms/live-preview-react' export const LivePreviewListener = ({ initialData }) => { const { data } = useLivePreview({ initialData, serverURL: process.env.NEXT_PUBLIC_SERVER_URL!, depth: 2, }) if (typeof document !== 'undefined' && data.title) { document.title = data.title } return null } 

// app/api/draft/route.ts import { draftMode } from 'next/headers' export async function GET(req: NextRequest) { const secret = req.nextUrl.searchParams.get('secret') if (secret !== process.env.PAYLOAD_DRAFT_SECRET) { return NextResponse.json({ error: 'Invalid token' }, { status: 401 }) } draftMode().enable() // redirect to preview page return NextResponse.redirect(new URL(`/posts/${req.nextUrl.searchParams.get('slug')}`, req.url)) } 

Optimal breakpoints for Live Preview

We recommend three base breakpoints covering most devices. Configuration is straightforward: provide label, width, and height. Editors can switch between them inside the admin.

For non-standard resolutions (e.g., 1920×1080), add custom breakpoints. This is especially useful for sites with fixed layouts. On one project, we configured preview for TV panels at 3840×2160 — a custom breakpoint was needed.

Typical errors when implementing Live Preview

• URL mismatch: If the admin builds URLs based on one pattern and the frontend uses another, editors see a 404. Verify URL generation for each collection.
• Missing CORS headers: The iframe won't load without a Content-Security-Policy header. Configure the server to allow framing from the admin domain.
• Hydration mismatch: If initialData doesn't match server data, React throws an error. Ensure useLivePreview receives the current draft — especially critical with React Server Components.

We diagnose such issues within a couple of hours. Get a consultation for your project — we'll help set up Live Preview correctly.

Turnkey setup process

1. Analysis — identify content types and URL structure.
2. Configuration — set breakpoints and URL generators for collections.
3. Integration — plug useLivePreview into the frontend and configure Draft Mode.
4. Testing — verify operation for all content types and devices.
5. Deployment — push changes to production.

What's included in the work

• Live Preview setup for 2–5 content types.
• Breakpoint definition (mobile and desktop).
• Integration with existing frontend (Next.js).
• Documentation for editors.
• Editor training on using the preview.
• 1 month of support after implementation.

Estimated timeline

From 1 to 3 days depending on project complexity. Pricing is calculated individually after scope assessment.

We have worked with Payload CMS for over 5 years and delivered 10+ headless projects. Our experience includes Live Preview for e-commerce stores, blogs, and corporate sites. We guarantee stable operation after implementation. Contact us to discuss your details.

The Live Preview source code is available on GitHub. Be sure to review the documentation before configuring.