Preview an entry

What is a preview?

Previewing an entry allows you to see what your content will look like when it’s live, without having to publish first. This helps you troubleshoot — for example, fix errors in formatting — before people outside your organization will see and interact with your content. 

Live preview vs preview in new tab

There are the following ways to preview an entry:

  • Live preview (recommended) — Allows you to preview your entry in the same page with the entry editor, view your changes live as you type, and quickly navigate to a specific entry and field so you can edit it.

  • Preview in a new tab — Allows you to preview your entry in a new web browser tab.

Open a preview

To preview an entry:

  1. Log in to the Contentful web app.

  2. Go to the Content tab.

  3. Go to the required entry and click to open it. The entry editor is displayed.

  4. From the entry editor sidebar, open the preview according to the following options:

    • Open Live Preview — Click the button to open the live preview of your entry.

    • Preview in a new tab — Click the arrow button to open the preview in a new browser tab.

    • Copy preview URL — Click the copy button to copy the preview URL to your clipboard (for example, to paste it into an email).

NOTE: By default, both live preview and preview in a new tab options are available in your entry editor sidebar. To have only an option of preview in new tab in the sidebar, go to “Settings > Content preview” and select Preview in new tab in the Preview mode area. The selected preview mode applies to all of your content previews in that environment.

Set up content preview

To be able to preview entries, you must create a content preview entity in the Contentful web app and configure a preview URL per content type.

To learn how to set up a content preview, refer to the following articles:

  • Set up content preview — Learn how to create a content preview and configure a preview URL.

  • Live preview — Learn how to set up live preview side-by-side editing and advanced features.

Was this helpful?
add-circle arrow-right remove style-two-pin-marker subtract-circle remove