Live Preview Not Working Despite Changes Being Saved

[AsmitaMallick]

Describe the Bug

I have been learning Payload CMS for a few weeks now, and the documentation has been extremely helpful in getting started. Thank you for such a detailed and beginner-friendly guide!

I am currently working on integrating Payload CMS into a website to dynamically input collections. Everything is working fine except for the Live Preview feature, which I have been troubleshooting for the past two days. Despite the changes being saved, the live preview does not reflect them in real-time.

I have referred to the documentation and tried debugging based on the guidance provided, but I haven’t been able to resolve the issue. My problem seems very similar to Issue #219(payloadcms/payload-3.0-demo#219).

Interestingly, the live preview feature works perfectly fine when using the provided website template, but it doesn’t function in my custom project.

I’m attaching a screen recording to provide more context and a clearer understanding of the issue.

Saascompass.live.preview.mp4

I have closely followed the documentation, so I’m unsure what step I might have missed or done incorrectly. Since I couldn’t find a solution, I decided to reach out here. Any guidance or pointers would be greatly appreciated!

Thank you for your time and for building such a fantastic tool.

Link to the code that reproduces this issue

https://github.com/AsmitaMallick/SaaSCompass-Payload

Reproduction Steps

Saascompass.live.preview.mp4

Which area(s) are affected? (Select all that apply)

plugin: other

Environment Info

Payload: latest
Next.js v15.1.5
Node.js 10.9.2

[bratvanov]

Hi,

For LivePreview to be "real-time", you really need to have versions and drafts enabled, with a sufficiently low interval for autosave – and I see this is not enabled in your saas-products collection config.

You can try adding something like this here, and see if that makes a difference for you:

versions: {
  drafts: {
    autosave: {
      interval: 100, // We set this interval for optimal live preview
    },
    schedulePublish: true,
  },
  maxPerDoc: 50,
},

Also, I see that you're using client-side livePreview here. I haven't yet worked with that, as the recommended solution now is to use server-side preview, and I have that working nicely. Have you tried the server-side way?

[bratvanov]

Looks like other people are also having issues with client-side live preview – #10798

[AsmitaMallick]

Hi,

For LivePreview to be "real-time", you really need to have versions and drafts enabled, with a sufficiently low interval for autosave – and I see this is not enabled in your saas-products collection config.

You can try adding something like this here, and see if that makes a difference for you:

versions: {
  drafts: {
    autosave: {
      interval: 100, // We set this interval for optimal live preview
    },
    schedulePublish: true,
  },
  maxPerDoc: 50,
},

Also, I see that you're using client-side livePreview here. I haven't yet worked with that, as the recommended solution now is to use server-side preview, and I have that working nicely. Have you tried the server-side way?

Hey, thanks for replying, I did tried this too but its still not working, any other suggestions?