LivePreview before/after hooks

[Patrickroelofs]

Lifecycle Hooks for livePreview (afterClose & beforeOpen)

Current behavior

When using Payload's livePreview together with Next.js, I often use draftMode from next/headers to enable draft previews.

import { draftMode } from "next/headers";

livePreview: {
  async url(args) {
    const draft = await draftMode();
    draft.enable();

    return `/blog/${args.data.slug}`;
  },
}

This is a simple and effective way to enable draft functionality in a Payload + Next.js project. However, one limitation is the lack of lifecycle hooks for when the preview is opened or closed.

Problem

1. No cleanup after closing the live preview

Once draftMode is enabled, it stays enabled until manually cleared. There is currently no built-in way to detect when the preview has been closed, which makes it difficult to reset state (e.g., disabling draftMode).

2. Race condition when opening preview

Because draftMode().enable() sets a cookie, there’s a timing issue:
The live preview window may open before the cookie is fully set, which means it opens without draft mode enabled. This causes confusion as the draft content doesn't show immediately unless the user manually refreshes the preview window.

Suggested Solution

Add support for optional lifecycle hooks on the livePreview object:

livePreview: {
  async url(args) {
    const draft = await draftMode();
    draft.enable();

    return `/blog/${args.data.slug}`;
  },
  beforeOpen: async () => {
    // Useful for setting cookies, enabling draft mode, etc.
  },
  afterClose: async () => {
    // Useful for cleanup, such as disabling draft mode
  },
}

this request was re-written with chatgpt, since I suck at writing clear descriptions