Live Preview | Directus Docs

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.

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.

Learn more 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.

Configure a Live Preview URL

Data Studio configuration for Posts collection. The Preview URL is filled in with the dynamic ID.

Navigate to Settings -> Data Model and select the collection you wish to configure. In the "Preview URL" section, specify the Preview URL for your project by selecting the field you wish to use to identify your object in your application from the dropdown and entering a URL in this format: http://your-website-url/<field>

Using Live Preview with Your Application

Once configured, Directus will send a request to your application for a page with the specified URL format. For example, if you've configured the URL to be https://mysite.com/posts/{id}, and load the preview for the item with an id of 42, then your application will receive a request to https://mysite.com/posts/42. You may choose to add preview=true to indicate to your client that it needs to treat this as a live preview. You may also choose to add an access token with the ability to view items as an additional URL query parameter.

You can then develop your application to handle that request and return a page that shows a preview of the item requested.

Using Live Preview with Static Site Generators If you're using a static site generator to preview your item data, be sure to develop it to render the item page on load as opposed to on build. Otherwise, it will only show the state of the item when the site itself was last built.

Using Live Preview with Content Versioning If you've enabled content versioning, you can pass the version identifier to your live preview URL.

Previewing Item Contents in the Editor

In an item page, toggle "Enable Preview" at the top of the page. Whenever you create or edit an item in your collection and “click” save, you should see a live preview of the item on the right-hand side of the screen.

Live preview of a post

Clicking on also lets you preview your content on desktop and mobile screens, while allows you to pop the live preview out into a separate window.

Reference Tutorials

Get once-a-month release notes & real‑world code tips...no fluff. 🐰

Import & Export

Learn to import and export multiple items stored as files using Directus.

Content Versioning

This guide covers the process of enabling and utilizing Content Versioning in Directus.