Editor Basics

Layout modes

The editor supports three layouts you can switch between at any time:

Split — editor on the left, live preview on the right (default)
Editor only — maximizes writing space, hides the preview
Preview only — shows the rendered document, hides the editor

Toggle with the toolbar buttons or Cmd+\ for split, Cmd+Shift+P for preview.

screenshot: editor-split.png — split view with editor and preview side by side

Live preview

The preview pane renders your markdown in real-time as you type. Headings, lists, code blocks, tables, and inline formatting all update instantly. The preview uses the same rendering pipeline as exported documents, so what you see is what you get.

Scroll sync

The editor and preview panes stay synchronized as you scroll. The sync algorithm accounts for rendered block heights — even long documents with embedded diagrams keep alignment.

Diagrams

Wrap diagram code in fenced code blocks with the language identifier:

Mermaid

```mermaid
graph TD
  A[Edit locally] --> B[Preview in browser]
  B --> C[Export PDF]
```

Mermaid diagrams render client-side for instant feedback. As you type, the diagram updates live in the preview pane.

screenshot: diagram-mermaid.png — rendered Mermaid flowchart in preview pane

D2

```d2
server -> database: queries
server -> cache: reads
client -> server: requests
```

D2 diagrams render server-side with ETS caching for fast repeat views. They produce clean SVG output that exports well to PDF.

screenshot: diagram-d2.png — rendered D2 diagram in preview pane

Command palette

Press Cmd+P (or Ctrl+P) to open the command palette. From here you can:

Search and switch between documents in your workspace
Run editor commands (toggle vim mode, change layout, etc.)
Jump to any file by typing part of its name

screenshot: command-palette.png — command palette open with file suggestions

Toolbar

The toolbar provides quick access to formatting and commands:

Formatting — bold, italic, headings, links, code, blockquotes
Layout — toggle split/editor/preview modes
Actions — export, share, cheatsheet

Every toolbar action has a keyboard equivalent — see Keyboard Shortcuts.

screenshot: toolbar.png — close-up of the formatting toolbar

Sidebar

The slide-out sidebar shows all files in your connected workspace. Search, browse, and switch documents without leaving the editor. When using collections, the sidebar also shows your curated document groups.

screenshot: sidebar.png — workspace sidebar with file tree

Immersive mode

Enter immersive mode with Cmd+Shift+F for distraction-free writing:

Fullscreen — all chrome disappears
Typewriter scrolling — cursor stays vertically centered
Paragraph focus — text outside the current paragraph dims

Press Esc to exit back to the normal editor.

screenshot: editor-immersive.png — immersive mode with paragraph focus

Cheatsheet

Forget the syntax for a table or footnote? Open the markdown cheatsheet overlay from the toolbar or command palette. It covers all supported markdown syntax with live examples.