Why Live Preview is only on document save?

[lsdebianchi]

👨‍🦰Hello,

I need some help to understand if I have misunderstood the live preview feature.

I had assumed that Live preview allows you to see the result before saving your changes and making them public. But from what I see (and from what happens when I had implemented the feature with @payloadcms/live-preview) you need to save (or autosave) for the iframe post message to be triggered.

This defeats what I perceive to be the purpose of the feature. So I must be wrong. What I am missing?

From here (https://payloadcms.com/docs/live-preview/server) I see:

Is there really no way to update the data on edit? I thought I could send the changes through the iframe post message communication (as decap/netlify-cms do/used to do).

(Maybe I need to setup versioning and autosaving drafts to get a realtime live preview which doesn't publish as you edit?)

[bratvanov]

Maybe I need to setup versioning and autosaving drafts to get a realtime live preview which doesn't publish as you edit

You nailed it here! That's exactly how live preview is designed to work in Payload - using drafts with autosave. At least that's how I believe server-side live preview works, AFAIR client-side works differently and might not need drafts/autosave.

[andershermansen]

Yes client side live preview does not need saving of document. The setup is a bit different, see https://payloadcms.com/docs/live-preview/client

[lsdebianchi]

@bratvanov, thank you, I see.
If that is the intended workflow it could be made more explicit in the docs, as well as the difference with the client-side workflow. Technically it is there: server-side says "every time document is saved, i.e. draft save, autosave, or publish" and client side says "every time document has changed". But this rapid mention in passing could be lost, as someone could think that "change" is just a synonym of "saved".

@andershermansen
Thank you! I was indeed following that documentation page for my implementation. But a slight misconfiguration was making it behave like a "on save" re-validation rather than "on edit".
My payloadCMS lives in the /api route of my site, so I was naively giving serverURL: "/api" to @payloadcms/live-preview, but I didn't realize that the library already adds the route making it /api/api and braking silently the "on edit" communication 😆

[dlbnco]

The documentation is also quite misleading in the sense that it makes you think it's enough to go through the steps, and everything should work. But apparently you need to modify your queries to draft: true conditionally (apparently on Next.js it relates to https://nextjs.org/docs/app/guides/draft-mode), otherwise either you won't see the live updates, or your draft changes will be made visible to the public.