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.

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. The version identifier also ensures that edits made via visual editing are saved to the selected version instead of the main item. However, your website must read this parameter and fetch versioned content using the version query parameter on the items endpoint (e.g. /items/posts/42?version=draft). Without this, the preview will display main content regardless of the selected version.

Visual Editing in Live Preview with Versions If your frontend is configured with the Visual Editor Frontend Library and a matching Visual Editor URL includes {{$version}}, visual editing in the live preview pane also works with content versions. When viewing a version, only items on collections with versioning enabled will show editable elements.

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.

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.