> For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://contentful.com/developers/docs/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://contentful.com/developers/docs/_mcp/server. # Live preview > Learn how to configure live preview for your content. ## What is live preview Live preview allows users to preview their content in real time in the same page with the entry editor. As changes to the content are made, they are immediately reflected in the preview pane. ## Live preview features Live preview comes with the following features: * **Side-by-side previewing and editing** — Edit your entry and preview changes in the same web app page, no switching between the tabs is needed: ![Live preview overview](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/936b9d3489b8e2717e2f7464be51519db2c165823c1a22fad5d6b4edcf714b8c/docs/assets/images/live-preview-overview.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260929%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260929T232203Z&X-Amz-Expires=604800&X-Amz-Signature=9577fa4da1678baa38a6209fd6f5d9afbf8ea0271856ebc6cc103845860831c5&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) * Live updates — As you edit your entry, the changes are simultaneously displayed in the preview pane, without refreshing the preview: ![Live preview live updates](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/5d4c716e345bf8b5a50590b7a7aa664f7d8ddc136f1afc6dace387889cd106dc/docs/assets/images/live-preview-live-updates.gif?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260929%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260929T232203Z&X-Amz-Expires=604800&X-Amz-Signature=d88823f8d1ce4656cb7021e6fc6ad657c40d749a90380e9dcdbbbbc6d79c425a&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) * Inspector mode — Click **Edit** against a specific piece of website content to quickly jump to its source field and make the necessary changes: ![Live preview inspector mode](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/51946bbab58088708c1d16e4daf6f1d1bf499d6828bd39491364d754fdc405fe/docs/assets/images/live-preview-inspector-mode.gif?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260929%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260929T232203Z&X-Amz-Expires=604800&X-Amz-Signature=574d77da4becd8a0b6e78277716722f57517ca552eedb5f8235004c43ba91eac&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) ## Live preview and custom editor Both the default entry editor provided by Contentful and any custom entry editor are compatible with live preview. Live preview displays the content of the editor tab that is located left-most in the entry editor. To modify the order of the entry editor tabs, go to the **Entry editors** tab of the relevant content type. ## Requirements To be able to use side-by-side previewing and editing, you must set up a content preview, but no code changes are required. To activate live preview advanced features - live updates and inspector mode - it is required to initialize the [live preview SDK](https://github.com/contentful/live-preview): | **Feature** | Requirement to initialize live preview SDK | | ----------------------------------- | ------------------------------------------ | | Side-by-side previewing and editing | No live preview SDK required. | | Live updates | Live preview SDK required. | | Inspector mode | Live preview SDK required. | > **Info** > > The live preview SDK works with JavaScript and has optimized integration for any React.js framework (like Next.js). To see the examples for different frameworks, refer to the [live preview SDK](https://github.com/contentful/live-preview). ## Setup To set up live preview: 1. Configure Content preview. As a prerequisite for setting up and using live preview, you must configure the preview URL and add it to your Content preview. To learn how to set it up, refer to [Content preview](/tutorials/preview/content-preview). 2. Modify your website security configuration. ![Live preview refused to connect](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/bdf67c8331f6911b7203e3591cee21e2dc7f7c39e89b82a2edbe85871aaa99af/docs/assets/images/live-preview-refused-to-connect.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260929%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260929T232203Z&X-Amz-Expires=604800&X-Amz-Signature=4f5bcf09650c24ce4958350bb5133534faf0a2d58325e2c03534ea957903ad8e&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) After the preview URL is set up, the live preview pane might display "Refused to connect" message. This can happen if your website has a strict security configuration (Security Header or Content Security Policy (CSP)), which prevents other websites from embedding it. Reach out to your dev or security team to modify your website security configuration for enabling live preview support. ​​ To view whether your website security configuration allows live preview support, perform the following steps: 1. Go to the **Network** tab of your browser console. 2. Search for the required page. 3. Under the **Headers** subtab, go to the **Response Headers**. 4. Check whether the security configuration is set according to one of the following options: * the X-Frame-Options header — If the X-Frame-Options header is set, remove it. OR * **Content-Security-Policy** header must include `frame-ancestors https://app.contentful.com` ![Live preview Content security policy](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/51d29b962808814d7a5f1da36feae130ac31a3132fee169c873bc88855199186/docs/assets/images/live-preview-content-security-policy.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260929%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260929T232203Z&X-Amz-Expires=604800&X-Amz-Signature=543b1b0a1e20aab313102d1880b7b0c4453090166b0bd375bd816ec3dc8f878c&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) ## Known issues and limitations ### My page has an authorization cookie for logging in To have functional or accessible cookies inside the live preview iframe, configure them with `SameSite=None` and the `Secure` flag. This allows your browser to pass them to the iframe. For example, you want users to log in to the preview website with an authorization cookie. In this case, the cookie is set up as follows: ``` Set-Cookie: auth=abc123; SameSite=None; Secure ``` > **Info** > > SSO will not work if you do not allow embedding. ## Next steps * [Set up inspector mode](/tutorials/preview/inspector-mode) * [Set up live updates](/tutorials/preview/live-updates)