Fixing Payload CMS Live Preview Configuration on Website Template

Date Published

After Payload CMS 3.45.0 Live Preview is Broken in Website template due to having unified view for preview and live preview. so we needed to fix it.

The Problem

The live preview feature in Payload CMS wasn't working due to missing and incorrect configuration in the payload.config.ts file.

Root Causes Identified

  1. Missing Live Preview URL: The livePreview.url was missing, so Payload didn't know where to send preview requests
  2. Inconsistent Server URL Setup: Using custom environment variables instead of standard Payload conventions
  3. Incorrect Preview Endpoint: Not using the proper draft mode endpoint

Changes Need to be Made

1. Add Live Preview URL Function

typescript

2. Create Preview Path Helper

typescript

How It Works

  • Collection Detection: The function analyzes the request URL to determine which collection (pages, posts, or products) is being previewed
  • Path Generation: Creates the correct frontend path based on collection type and slug
  • Preview Parameters: Constructs URL parameters including the preview secret for authentication
  • Draft Mode Integration: Uses the existing /next/preview endpoint to enable Next.js draft mode.

Optional Right Now

Move the Livepreview listener to Root Layout.

typescript

We can move this to Layout.tsx or whatever is your root layout.

typescript


It is very standard behavior of Payload CMS that will not render the live preview until you write something on title of the page. Write the title and try live preview or refresh the page after writing the title and it would work just fine. This is mainly because the live preview does not actually contain a temporary slug or route for the page to preview and upon refresh or on save it would use the current slug from title. if they made it with some temporary available slug while no title is available. it could be easily fixed but rn no one writes like that and also live route change refresh and re open slug is a limitation tho my knowledge can be limited yet it works.

Live preview now works correctly, enabling real-time content updates in the admin panel with proper draft mode integration and authentication.