Live Preview

Real-time Markdown rendering as you type

Overview

The Live Preview pane shows your Markdown content rendered in real-time as you type. See exactly how your document will look with proper formatting, images, code highlighting, and more, all updating instantly without any manual refresh.

Toggle the preview on or off using the preview button in the toolbar or with the keyboard shortcut Cmd/Ctrl + P.

Key Features

Real-time Rendering

See your Markdown rendered instantly as you type, with no delay.

Scroll Synchronization

Preview follows your cursor position in the editor automatically.

Auto-generated Table of Contents

Navigate your document easily with an automatic TOC from headings.

Theme-aware

Preview adapts seamlessly to light and dark mode.

Custom CSS Support

Style your preview with custom CSS for personalized appearance.

Adjustable Font Size

Set the preview font size independently from the editor.

Scroll Synchronization

Keep your editor and preview in sync as you navigate through your document. The preview automatically follows your cursor position.

Follow Cursor

On

Preview automatically scrolls to match your cursor position in the editor.

Toggle Sync

Toolbar button

Enable or disable scroll synchronization with a single click.

Bidirectional Sync

Optional

Scrolling the preview also moves the editor to the corresponding position.

How Scroll Sync Works

When enabled, the preview calculates your approximate position in the rendered output based on your cursor line in the editor. This keeps related content visible in both panes simultaneously.

Rendered Elements

The preview supports a wide range of Markdown elements, all rendered with proper styling and interactivity.

Headings

H1-H6 with proper visual hierarchy and anchor links

Bold Text

Strong emphasis rendered with bold weight

Italic Text

Emphasis rendered with italic styling

Strikethrough

Deleted text with line-through styling

Bullet Lists

Unordered lists with customizable bullet styles

Numbered Lists

Ordered lists with automatic numbering

Task Lists

Interactive checkboxes for todo items

Tables

Formatted tables with borders and alignment

Code Blocks

Syntax-highlighted code with language detection

Images

Inline images with automatic sizing

Links

Clickable links with hover states

Mermaid Diagrams

Flowcharts, sequence diagrams, and more

LaTeX Math

Mathematical equations rendered beautifully

Blockquotes

Styled quote blocks with visual distinction

The preview automatically generates a table of contents from your document's headings. This provides an outline of your document structure and enables quick navigation.

Auto-generated from all heading levels (H1-H6)
Click any heading in the TOC to jump to that section
Shows the hierarchical structure of your document
Updates in real-time as you add or modify headings
Collapsible for a cleaner interface

Quick Navigation: Click on any heading in the rendered preview to copy a link to that section, or use the TOC panel to jump directly to any part of your document.

Custom Styling

Personalize your preview appearance with custom CSS. Add your own styles to change fonts, colors, spacing, and more.

Change heading colors

h1, h2, h3 { color: #3b82f6; }

Custom link styling

a { color: #10b981; text-decoration: underline; }

Increase paragraph spacing

p { margin-bottom: 1.5em; }

Custom code block background

pre { background: #1e293b; border-radius: 8px; }

Accessing Custom CSS

Go to Settings → Appearance → Custom CSS to add your own styles. Changes apply immediately to the preview pane.

Custom CSS only affects the preview pane and does not modify the editor appearance. For comprehensive styling options, see the Custom CSS documentation page.

Font Settings

Adjust the preview typography independently from the code editor for optimal readability.

Setting	Description	Range
Font Size	Adjust the preview font size independently from the editor	`12px - 24px`
Line Height	Control the spacing between lines for readability	`1.4 - 2.0`
Maximum Width	Set the maximum content width for comfortable reading	`600px - 100%`

Reading Mode

For distraction-free reading, you can expand the preview to full width by hiding the editor pane. Use the layout toggle in the toolbar or press Cmd/Ctrl + Shift + P.

Pro Tips

Quick Preview Toggle

Double-click the divider between editor and preview to quickly toggle between split view and editor-only view.

Resize Preview Pane

Drag the divider between editor and preview to adjust the relative widths. Your preference is saved automatically.

Copy Rendered Content

Select text in the preview to copy the formatted content. This is useful for pasting into rich text editors or emails.