I’m currently using Payload CMS as a headless CMS together with Webstudio for the frontend. I’m trying to enable Payload’s Live Preview feature — which embeds the frontend in an iframe directly inside the Payload admin UI.
The standard preview link (opens in a new tab) works fine. But the Live Preview tab just stays blank, and I suspect it’s because Webstudio might block iframe embedding via X-Frame-Options or Content-Security-Policy.
My questions: Does Webstudio allow embedding its pages inside iframes from other origins (like cms.revaliant.de)?
Has anyone successfully integrated Payload’s Live Preview with Webstudio?
This feature would be amazing — combining a visual editor with full CMS power (drafts, versions, relations, etc.).
Would love to hear if anyone has tried this or knows a workaround.
Does Webstudio allow embedding its pages inside iframes from other origins (like cms.revaliant.de)?
No, we were planing to create a setting for that so that you can enable your domain there where you need to be embeddable. Default setting right now is to disable because its safe against atacks.
Do you know what payload does to reload live previews? from the demo it seemed too fast to be reloading the entire page, possibly they have hot reload. So I wonder what happens if you use webstudio URL in there
I don't really know what it does to reload but I think it sends a POST
The URL of the frontend application. This will be rendered within an iframe as its src. Payload will send a window.postMessage() to this URL with the document data in real-time. The frontend application is responsible for receiving the message and updating the UI accordingly. Use the useLivePreview hook to get started in React applications.
