/
Live Preview function in Contentstack

User Manual For Website Editors and Administrators

Live Preview function in Contentstack

The Live Preview function in Contentstack

The live preview function in Contentstack helps to quickly see changes you make in a web page or a content block of a web page without publishing it to UAT. This makes the handling easier and quicker especially because the live preview will not have a cache.

The workflow to use the Live Preview function

1 – Open a web page in Contenstack (or create a new one first, including a content block).

2 – Click on the “Live Preview” icon in the menu bar on the right side.

image-20250121-133930.png

 

3 – Click on “ … “, then on “Settings” to select your local UAT you are working on. It will offer all Locales in UAT which you have admin rights for.

image-20250121-134112.png

 

image-20250130-082203.png

For technical reasons, we had to install the UAT access through Internet which requires user name and password:

mefaTest
MrtTa_1221*

 

4 – The preview of the web page will appear in the selected UAT environment next to the “Web page” content type entry.

image-20250130-075102.png

 

5 – Now you can start working in the Backend to make your modifications in the Web page.

  1. Make a change

  2. Check the preview for the adjustment

  3. Save it, publish it

6 – To make changes in the referenced Content block, please proceed in the Backend as usual.

 

7 – As soon as you click on “Edit” to open the Content Block, the preview tab on the right will close.

If you use two monitors, you could open the "preview tab" on the second monitor to have an even better overview by clicking “Open in new tab”.

 

8 – Now you can start working in the Backend to make your modifications in the Content block. The procedure is the same as for the Web page (step 5). Open the Live Preview tab on right to see the preview.

  1. Make a change

  2. Check the preview for the adjustment

  3. Save it, publish it

    Example:

     

    image-20250130-090306.png
    Move and change the Headline

     

     

    image-20250130-090506.png
    Move and change the Headline



    image-20250130-090929.png
    Live preview (when opened in a new tab)


9 – As soon as you are happy with the preview, don’t forget to Save and Publish the content / changes as usual.

If you had published the page to PROD, please always publish to both environments, UAT and Prod, even if you don't need UAT for testing.