mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
e161601b85
* Update editor/live-preview.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> * Update editor/live-preview.mdx --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
47 lines
1.8 KiB
Plaintext
47 lines
1.8 KiB
Plaintext
---
|
|
title: "Live preview"
|
|
description: "Preview your documentation site and see changes in real time as you edit."
|
|
keywords: ["preview"]
|
|
---
|
|
|
|
Preview your documentation site in real time as you make changes in the web editor. Live previews show your site exactly as it appears when published, without creating a preview deployment.
|
|
|
|
- **Content changes**: See new and edited pages.
|
|
- **Configuration updates**: View color, theme, logo, and other changes instantly.
|
|
- **Navigation structure**: Preview how navigation items appear in the sidebar and tables of contents.
|
|
- **Component changes**: See how components render with your content.
|
|
|
|
## Live previews versus preview deployments
|
|
|
|
Both features let you preview changes before publishing, but serve different purposes.
|
|
|
|
| | Live preview | Preview deployment |
|
|
|---------|--------------|-------------------|
|
|
| **Speed** | Instant | Requires build time |
|
|
| **Access** | In the editor | Shareable URL |
|
|
| **Use case** | View changes while editing | Share with team for review |
|
|
| **Availability** | While editor is open | Persists until closed |
|
|
|
|
Use live preview for immediate feedback as you work. Create preview deployments when you need to share changes with your team or test on different devices.
|
|
|
|
## Enable live preview
|
|
|
|
Click the <Icon icon="target" /> button in the toolbar to open a live preview of your site in the editor.
|
|
|
|
<Frame>
|
|
<img
|
|
src="/images/editor/live-preview-light.png"
|
|
alt="Live preview button on the editor toolbar."
|
|
className="block dark:hidden"
|
|
/>
|
|
<img
|
|
src="/images/editor/live-preview-dark.png"
|
|
alt="Live preview button on the editor toolbar."
|
|
className="hidden dark:block"
|
|
/>
|
|
</Frame>
|
|
|
|
<Note>
|
|
Live preview is only available for public documentation. If your documentation requires authentication, the editor displays a "Live preview unavailable" message.
|
|
</Note>
|