# Live preview (/editor/live-preview)

<!-- agent-signals: reading_time_min: 1 · est_tokens: 552 · updated: 2026-07-30 -->
Related: [How to use the editor](/editor/tutorial.md), [Git essentials for the editor](/editor/git-essentials.md), [Create and edit pages](/editor/pages.md), [Organize navigation](/editor/navigation.md), [Branching and publishing](/editor/branching-and-publishing.md), [Comment on pages in the editor](/editor/comments.md)

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 [#open-live-preview]

Click the <Icon icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M18.8906 12.846C18.5371 14.189 16.8667 15.138 13.5257 17.0361C10.296 18.8709 8.6812 19.7884 7.37983 19.4196C6.8418 19.2671 6.35159 18.9776 5.95624 18.5787C5 17.6139 5 15.7426 5 12C5 8.2574 5 6.3861 5.95624 5.42132C6.35159 5.02245 6.8418 4.73288 7.37983 4.58042C8.6812 4.21165 10.296 5.12907 13.5257 6.96393C16.8667 8.86197 18.5371 9.811 18.8906 11.154C19.0365 11.7084 19.0365 12.2916 18.8906 12.846Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" /> live preview button in the top bar to open a live preview in a new tab.

<Frame>
  <img src="/_assets/ab993c3576575d078550e89981150c9a517a3df20ece1f4339f5761023d8eec9" alt="The live preview button in the toolbar." className="block dark:hidden" />

  <img src="/_assets/c5251d903dd024875520d18129cbd02d76ea54a00aa295ca857a095232352e40" alt="The live preview button in the toolbar." className="hidden dark:block" />
</Frame>

<Note>
  Live preview is only available for public sites.
</Note>

## Live preview versus preview deployments [#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).