Is it possible to embed Payload CMS Live Preview in Webstudio?
Is it possible to embed Payload CMS Live Preview in Webstudio?
At a glance
The community member is using Payload CMS as a headless CMS and Webstudio for the frontend. They are trying to enable Payload's Live Preview feature, which embeds the frontend in an iframe inside the Payload admin UI. However, the Live Preview tab stays blank, and the community member suspects it's because Webstudio might be blocking iframe embedding via X-Frame-Options or Content-Security-Policy.
The community members discuss whether Webstudio allows embedding its pages inside iframes from other origins, and one community member confirms that Webstudio currently disables this feature by default for security reasons, but they plan to add a setting to enable it for specific domains. The community members also discuss potential workarounds, such as using Cloudflare to overwrite the header, and how Payload's Live Preview feature might work with Webstudio.
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.
