# Live preview

Open live preview in Hygraph Studio to see how your draft content looks on the frontend before publishing. Learn how to save, refresh, switch preview URLs, and change view sizes.

Live preview loads your website in a panel alongside the entry form in Studio. You see exactly how your draft content looks on the actual site before you publish it, and you can keep editing while the preview stays open.

## Prerequisites

Your developer must have [configured a Preview widget and preview URL for your content model](https://hygraph.com/docs/developer-guides/schema/live-preview). If **Open live preview** does not appear in the right sidebar when you open an entry, ask your developer to check the setup.

## Open live preview

The entry must exist in the `DRAFT` stage before the **Open live preview** button appears. If you are creating a new entry, save it first before opening the preview.

![Open live preview](https://hygraph.com/images/docs/user-guides/live-preview/live-preview-open.png)

1. Navigate to **Content** and open the entry you want to preview.
2. In the right sidebar, click **Open live preview**. If more than one preview link is configured, you can use the dropdown menu to select a preview link.
        ![Live preview - Dropdown selection](https://hygraph.com/images/docs/user-guides/live-preview/live-preview-selection.png)
3. Make changes to any field in the entry form.
4. Click **Save & Preview** to save your changes and refresh the preview.

The preview shows your draft content, that is, changes you have saved but not yet published. It does not show changes you have typed but not saved.

![Live preview](https://hygraph.com/images/docs/developer-guides/visual-editing-live-preview.png)

**Warning:**
**Save** saves your changes but does not refresh the preview. **Save & Preview** saves your changes and refreshes the preview. If you save without clicking **Save & Preview**, the preview continues to show the previous version of your content.

## Switch view size

At the top of the preview panel, three buttons let you switch between screen sizes: desktop, mobile, and full width. Use this to check how your content looks across different devices before publishing.

[Video](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/cmovey9utkfff06w2rvvi4s1z)

## Switch locale

If your project has multiple locales configured, a locale switcher appears in the preview panel. Use it to switch between locales and see how your content looks in each language without leaving the preview. If the locale switcher does not appear, ask your developer to [set it up](https://hygraph.com/docs/developer-guides/schema/live-preview#define-a-preview-url-template).

[Video](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/cmovfakupm0st06w2jrggq67d)

## Troubleshooting

### Blank preview panel or security error

Your site's security configuration is blocking the preview from loading inside Studio. This is a server configuration issue. Ask your developer to check the `X-Frame-Options` and `Content-Security-Policy` headers on your frontend.

### Open live preview button is missing

Save the entry first. The button only appears once the entry exists in the `DRAFT` stage. If the button is still missing on a saved entry, ask your developer to verify the Preview widget is configured for this content model.

### Preview shows old content after saving

Click **Save & Preview** rather than **Save**. If the preview still shows old content after using **Save & Preview**, ask your developer to check whether caching is active in the preview environment.

### Preview shows a 404 or wrong page

The preview URL configured for this content model may be pointing to the wrong route. Ask your developer to verify the URL in the Preview widget settings.

## What's next

- [Use Click to Edit](https://hygraph.com/docs/editor-guides/visual-editing/click-to-edit-editors): How to use Click to Edit in Studio and standalone mode, and what to do when Edit buttons are missing.
- [Edit content](https://hygraph.com/docs/editor-guides/content/edit-content): How to edit fields directly in the entry form.
- [Content stages](https://hygraph.com/docs/editor-guides/other-features/content-stages): The difference between Draft and Published, and what saving does to your content stage.