---
title: "Live preview"
description: "Check a page beside the editor, try different screen widths, and compare drafts with the published site."
url: https://docs.systhema.app/editor-guide/pages/live-preview
version: unreleased (main)
docs_index: https://docs.systhema.app/llms.txt
---

You'll check how a page looks before making its changes public. **Live Preview** opens the website beside the editor. **Preview** opens a separate preview page.

![The homepage editor beside Live Preview, with screen size and Responsive controls](./images/live-preview.light.webp)

## Preview while you edit

1. Open a page in **Pages**. For a new page, give it a **Page title** and **URL path** and choose **Save Draft** first.
2. Choose **Live Preview**, the eye icon beside the save controls.
3. Edit a field and watch the preview. Allow it time to update. If your site updates preview after saving, choose **Save Draft** to refresh the saved content.
4. Use **Responsive** to select a screen size. You can also adjust the width and height values and the zoom control.
5. Choose **Open in new window** if you want more room. Choose **Live Preview** again to return to the wider editor.

| Control                 | What it does                                             | Tip                                                             |
| ----------------------- | -------------------------------------------------------- | --------------------------------------------------------------- |
| **Live Preview**        | Opens the website beside the editor.                     | Useful for checking text wrapping and block order as you edit.  |
| **Responsive**          | Changes the preview screen size.                         | Check a phone-sized view as well as desktop.                    |
| Width and height fields | Set the preview dimensions.                              | Use a narrower width to catch long headings or crowded layouts. |
| Zoom control            | Changes how large the preview appears in your workspace. | Zoom changes your view, not the page's design.                  |
| **Open in new window**  | Opens the preview in another window or tab.              | Useful for a wider view.                                        |
| **Live Preview** again  | Closes the preview beside the editor.                    | Gives the editor more space.                                    |
| **Preview**             | Opens a separate preview of the page.                    | Keep it separate from an ordinary public-page check.            |

## Check the right things

Read your headings and paragraphs. Check image crops, button labels, links, and the order of content. At a smaller width, check that text stays readable and essential content is easy to find.

Preview shows your working content. It does not publish it. Use **Publish changes** when you are ready for visitors to see it.

## Compare with the published page

Open the ordinary page address in a separate tab. A saved draft on an already published page can differ from what visitors see. Preview links may show draft content, so use the ordinary address for this comparison.

If the website shows a preview bar, choose **Exit preview mode** before checking what visitors see. An active preview session can also affect another tab in the same browser.

After publishing, refresh the ordinary page and check it again. See [Drafts and versions](https://docs.systhema.app/editor-guide/pages/drafts-and-versions.md) for which saved version is public.

## If preview looks wrong

Check that your new page has an address and a saved draft. Wait for loading to finish, then save again if needed. If an image or related item is missing, confirm that you selected it in the field. Contact your agency with the page address and a screenshot if preview remains blank or differs from the published page.

## Check afterwards

Check the page at desktop and phone widths. Confirm that you are viewing the draft while reviewing, and use **Exit preview mode** before comparing it with the public page. Previewing alone does not publish your changes.

## Related pages

[Your first edit](https://docs.systhema.app/editor-guide/onboarding/your-first-edit.md), [Editing content](https://docs.systhema.app/editor-guide/pages/editing-content.md), [Blocks](https://docs.systhema.app/editor-guide/pages/blocks.md), [Drafts and versions](https://docs.systhema.app/editor-guide/pages/drafts-and-versions.md).