> ## Documentation Index
> Fetch the complete documentation index at: https://tomee-mintlify-live-preview-site-settings.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Live preview

> Preview your site in real time as you edit, with continuous updates that render content, navigation, and configuration changes instantly.

Preview your site while you edit. Live previews render pages exactly as they look when published, and update as you make changes to content, navigation, and configuration.

## Open live preview

Click the <Icon icon="play" /> live preview button in the top bar. Your **Open live preview in new tab** preference in [editor settings](/editor/settings) determines whether the preview opens in a new browser tab or in the editor.

When the preview opens in the editor, click **Site settings** in the preview toolbar to edit your site's configuration without leaving the preview.

<Frame>
  <img src="https://mintcdn.com/tomee-mintlify-live-preview-site-settings/7qkypuvCQNO31vQw/images/editor/live-preview-light.png?fit=max&auto=format&n=7qkypuvCQNO31vQw&q=85&s=bfbcb45e131cfb3a3c7f53f645d3f368" alt="The live preview button in the toolbar." className="block dark:hidden" width="464" height="192" data-path="images/editor/live-preview-light.png" />

  <img src="https://mintcdn.com/tomee-mintlify-live-preview-site-settings/7qkypuvCQNO31vQw/images/editor/live-preview-dark.png?fit=max&auto=format&n=7qkypuvCQNO31vQw&q=85&s=de65e3115515e237f3e68f63833daea6" alt="The live preview button in the toolbar." className="hidden dark:block" width="467" height="192" data-path="images/editor/live-preview-dark.png" />
</Frame>

## Edit site settings in live preview

Use the Site settings inspector when you want to adjust site configuration while checking the rendered result. It includes the same sections as the [Site configurations](/editor/configurations) panel.

1. Open the live preview in the editor.
2. Click **Site settings** in the preview toolbar.
3. Select a configuration section and edit the settings.
4. Close the inspector with **Close site settings** to return to the preview.

The preview updates as you edit. If your preference opens live preview in a new tab, turn off **Open live preview in new tab** in [editor settings](/editor/settings). You can then use the inspector.

## Ask the agent in live preview

Click **Ask agent** in the preview toolbar to open the [editor agent](/editor/agent) beside the live preview. Opening the agent closes the Site settings panel. Opening Site settings closes the agent. Viewer roles do not see the **Ask agent** button.

## Live preview versus preview deployments

|                  | Live preview                    | Preview deployment                |
| ---------------- | ------------------------------- | --------------------------------- |
| **Speed**        | Instant                         | Requires a build                  |
| **Access**       | Local URL                       | Shareable URL                     |
| **Use when**     | Reviewing changes while editing | Sharing with your team for review |
| **Availability** | While the editor is open        | As long as the branch exists      |

Use live preview for immediate feedback while editing. When you need to share changes with your team or test on a different device, use a [preview deployment](/editor/branching-and-publishing#preview-your-changes).