Live preview

The challenge for content authors

When going headless, the visuals of the project are completely separated from the content authoring interface. While this separation is a key advantage of headless architecture, the default interface can be challenging for content authors as they lack visibility into how their changes will be displayed on the page.

For example, a content author may need to experiment with headline length to ensure it aligns with the blog post layout, or swap out the main logo of their organization's website. However, without a proper preview function to validate these changes within the context of the platform, authors have to rely solely on the default CMS interface, which consists of text inputs and metadata. This can make it challenging for authors to feel confident about publishing their drafted content.

Take a look below how a content author might experience editing a website without visual context of the project.

One of the most user-friendly tools that we can suggest when tailoring the authoring experience is to add a live preview into the CMS platform’s graphical user interface (GUI). A live preview gives you a UI where you can see unpublished content from your CMS on your site. This is a great tool for testing new content, as you can see exactly what the changes will look like before pushing it live to your users.

There are different tooling that can be used for a live preview depending on the CMS you use and the authoring experience you want for your end users:

What you see is what you get (WYSIWYG) editing

A well-known way of editing content in a CMS is to use a WYSIWYG (or multidirectional) editing interface. This type of tooling allows you to see and edit content in a form that appears as it would when displayed on an interface or webpage. When using a live preview with multidirectional editing, you can edit both the raw data or make changes within the live UI interface – both directions of editing will save your changes into your content database.

Headful CMS products often come with a WYSIWYG editor as part of the platform, which has traditionally been a big draw of these products for non-technical people. To achieve this type of live preview in a headless stack, you often need to add an additional tool. One example of a multidirectional editor tool that can be used with headless architecture is Stackbit.

WYSIWYG editing removes the need for content editors to understand the structure of the content. Instead, they simply find the content they wish to change on the page, click on it, and make the change.

View-only preview

A more common way of achieving a live preview on a headless stack is to use a view-only preview of the content. Data only flows one way into this preview UI, meaning that the preview environment will show live updates of any draft data in the CMS, but you cannot edit content within the live UI preview. This maintains a separation of concerns for editing and displaying the data, and you often get the same benefits of a multidirectional editor without needing as much overhead to set it up.

Many headless CMS platforms include a view-only preview or have additional plugins that can be added to set one up.

The specific tools and approaches available for integrating live preview will depend on the headless CMS platform being used and the project's requirements. The best case scenario is that your organization's CMS has native preview functionality or there's an available add-on. If a third-party tool is required instead, it just may result in a less efficient workflow for authors or provide an inconsistent previewing experience.

Sanity, for example, has a preview feature that is built-in and seamlessly integrated with the CMS interface through the use of its native iframe pane plugin.

• Real-time editing: Our content authors can preview their real-time drafted changes in the Sanity interface and validate exactly how they will affect the front-end before publishing.

• Split-pane view: The plugin adds a "split view" editing pane option, which enables our authors to view the editing interface on one side while simultaneously seeing a live preview of the site (via iframe) on the other.

Take a look at how we used the split-pane feature to validate the look and feel of this post before we clicked “publish.”

In May 2023, Sanity released visual editing and content source maps, which allow users to quickly locate content in Vercel preview builds. This is especially helpful for locating and updating content that's reused in multiple parts of a site (which, in Contentful, is an enormously time-consuming task when working with nested content).

With Sanity's new visual editing feature, you can quickly navigate to specific content without knowing where it is located within the CMS interface.