Skip to content
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 16 additions & 6 deletions editor/live-preview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,33 @@
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.
Preview your documentation site in real time as you make changes in the web editor. Live previews open in a separate browser window and 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.
- **Content changes**: See new and edited pages update instantly.
- **Configuration updates**: View color, theme, logo, and other changes in real time.
- **Navigation structure**: Preview how navigation items appear in the sidebar and tables of contents.
- **Component changes**: See how components render with your content.

<Note>
Live preview requires keeping both the editor and preview windows open. Changes sync automatically between windows as you edit.
</Note>

## 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 |
| **Access** | Separate window (local only) | 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.
Click the <Icon icon="media-play" /> button in the toolbar to open a live preview of your site in a new browser window.

<Frame>
<img
Expand All @@ -41,6 +45,12 @@
/>
</Frame>

The preview window opens alongside your editor and updates automatically as you make changes. Keep both windows open to see your edits in real time.

<Note>
Live preview is only available for public documentation. If your documentation requires authentication, the editor displays a "Live preview unavailable" message.
Live preview is currently **local only** and requires keeping both the editor and preview windows open in the same browser session. For shareable previews that your team can access, [upgrade your plan](/deploy/preview-deployments) to use preview deployments.
</Note>

<Warning>
Live preview is not available for documentation that requires authentication. If your documentation uses auth, the preview window will not display content.

Check warning on line 55 in editor/live-preview.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

editor/live-preview.mdx#L55

Avoid using 'will'.
</Warning>