Preview Mode

Last Updated: Aug 1, 2022
documentation for the dotCMS Content Management System

Opening a Page in dotCMS displays a collapsible action palette on the right hand side of the Page with three different tabs across the top left side of the page- Edit (if locked for editing), Preview, and Live.

Clicking on the Preview tab causes the Edit Mode tools to be removed from the working copy of the Page so that additions of Content or changes to the Page can be previewed as they will appear when the Page is published. The Preview Mode removes all of the editing buttons on Containers and Contentlets to allow a true preview of the working or “draft” version of the Page.

A collapsible toolbar on the right hand column displays the following options:

  • Lock for Editing/Release Lock - Toggles the Page in and out of Edit Mode
  • Publish Page- Publishes the Page so all changes to the Page or additions of content become “live” on the front-end page
  • Add to Bundle- Adds the Page to a bundle for Push Publishing
  • Assign Workflow- Allows the Content Contributor to assign the Page to another user/role in a Workflow Task
  • *What's Changed - Green highlights additions to the page and red highlights content that has been removed since the Page was last published.
  • Page Properties- brings the user to the Add/Edit Page view where Page Properties, Page Permissions, and Page Versions can be managed.
  • Page Statistics- brings the user to the Web Statistics Page view where users can view and filter Page statistics
  • Create New Page - add a new Page
  • LANGUAGE allows to preview the Page in any other language created in the system
  • VIEWING AS - displays personalize utilizing the visitor Persona
  • DEVICE PREVIEW [On a(n)] - displays a view of the page in the selected device type

*What's Changed?

The “What's Changed?” option displays a visual difference between the Preview and Live mode views of the current page. If Content has been added or edited and not published on the Page the changes will be reflected in red for everything deleted and in green for anything that has been added.

Below you can see a Page from Preview mode that has been modified to add text and remove an image in Edit Mode, and how What's Changed displays the differences between the Pages.


The “VIEWING AS” option displays the personalized content on the page in the perspective of the chosen Visitor Persona. Selecting a Visitor Persona sets the persona on the page, triggering rules engine conditions and actions, and re-renders the page to display Persona targeted content (if any exists).

*Device Type Preview [On a(n)]

The “On a(n)” device type selection provides a preview of the page in the perspective of the chosen device type. This allows for responsive page design testing and quality assurance for the front end user experience on a variety of mobile platforms.

Note for Webmasters:If you require an specific behaviour for when your page is queried and read through the What's Changed functionally, you can use the request header “User-agent“. The “User-Agent” will is equal to “DOTCMS-HTMLPAGEDIFF” when the What's Changed?is being used on your page.

You can access that “User-Agent” header from your velocity page code in this way:

#if ($request.getHeader("User-Agent") == "DOTCMS-HTMLPAGEDIFF")  
##Custom code...  

On this page