# 实时预览 (/zh/editor/live-preview)

<!-- agent-signals: reading_time_min: 1 · est_tokens: 395 · updated: 2026-07-30 -->
Related: [创建和编辑页面](/zh/editor/pages.md), [添加媒体](/zh/editor/media.md), [组织导航](/zh/editor/navigation.md), [配置](/zh/editor/configurations.md), [在 Web 编辑器中协作](/zh/editor/collaborate.md), [评论](/zh/editor/comments.md)

在编辑时预览你的站点。实时预览会准确呈现页面发布后的效果，并在你对内容、导航和配置进行修改时实时更新。

<div id="open-live-preview">
  ## 打开实时预览 [#打开实时预览]
</div>

点击工具栏中的 <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>" /> 实时预览按钮，在新标签页中打开实时预览。

<Frame>
  <img src="/_assets/ab993c3576575d078550e89981150c9a517a3df20ece1f4339f5761023d8eec9" alt="工具栏中的实时预览按钮。" className="block dark:hidden" />

  <img src="/_assets/c5251d903dd024875520d18129cbd02d76ea54a00aa295ca857a095232352e40" alt="工具栏中的实时预览按钮。" className="hidden dark:block" />
</Frame>

<Note>
  实时预览仅适用于公开文档。
</Note>

<div id="live-preview-versus-preview-deployments">
  ## 实时预览与预览部署 [#实时预览与预览部署]
</div>

|          | 实时预览     | 预览部署          |
| -------- | -------- | ------------- |
| **速度**   | 即时       | 需要构建          |
| **访问方式** | 本地 URL   | 可分享的 URL      |
| **使用时机** | 在编辑时查看更改 | 与团队共享以供审阅     |
| **可用性**  | 当编辑器打开时  | 只要该 branch 存在 |

在编辑过程中使用实时预览以获得即时反馈。当你需要与团队共享更改，或在不同设备上测试时，请使用 [预览部署](https://www.mintlify.com/docs/editor/branching-and-publishing#preview-your-changes)。