Skip to content

Add clarification on pre-requisites for setting up live preview #467

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add clarification on pre-requisites for setting up live preview #467

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions content/guides/02.content/5.live-preview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,23 @@ description: Learn to set up your project for live previewing items from your ap

Live preview allows you to show changes in your website collection before publishing and without the need to refresh the browser.

## Live Preview Pre-Requisites

Before setting up live preview, ensure your Directus instance can embed external content.
Copy link
Member

@Nitwel Nitwel Oct 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Before setting up live preview, ensure your Directus instance can embed external content.
Before setting up live preview, ensure your Directus instance can embed external content by configuring the content security policy headers as described below.


**Required Environment Variable**

Your website will not be able to speak to your Directus instance if you do not set `CONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_SRC="<your-website-base-url>"` within your instances env.
Copy link
Member

@Nitwel Nitwel Oct 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Your website will not be able to speak to your Directus instance if you do not set `CONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_SRC="<your-website-base-url>"` within your instances env.
Your website will not be able to be rendered in your Directus instance if you do not set `CONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_SRC="<your-website-base-url>"` within your instances env.


[Learn more](/configuration/security-limits) about Directus env security settings.

**Configure Your Website Content Security Policy**

Your website must allow Directus to embed it in an iframe. Add this header to your website: `Content-Security-Policy: frame-ancestors 'self' <your-directus-url>;` If you're unsure where to add this, check your web server configuration files, your site's build configuration, or your hosting platform's security settings.

For more information, see the [Live Preview Reference Tutorials](#reference-tutorials).


## Configure a Live Preview URL

![Data Studio configuration for Posts collection. The Preview URL is filled in with the dynamic ID.](/img/e3619c91-8917-4014-9ad1-5d7cd2b59ff4.webp)
Expand Down Expand Up @@ -36,3 +53,10 @@ and “click” save, you should see a live preview of the item on the right-han
![Live preview of a post](/img/ae834006-2b0b-40df-87aa-66e5c2da1987.webp)

Clicking on :icon{name="material-symbols:devices"} also lets you preview your content on desktop and mobile screens, while :icon{name="material-symbols:open-in-new"} allows you to pop the live preview out into a separate window.

## Reference Tutorials
- [Implementing Live Preview in Astro](../../tutorials/1.getting-started/implementing-live-preview-in-astro.md)
- [Implementing Live Preview in Next.js](../../tutorials/1.getting-started/implementing-live-preview-in-next-js.md)
- [Implementing Live Preview in Nuxt](../../tutorials/1.getting-started/implementing-live-preview-in-nuxt.md)
- [Implementing Live Preview in React](../../tutorials/1.getting-started/implementing-live-preview-in-react.md)
- [Implementing Live Preview in SvelteKit](../../tutorials/1.getting-started/implementing-live-preview-in-sveltekit.md)