The Editor

The Unmarkdown editor uses a split-pane layout with a CodeMirror Markdown source editor on the left and a TipTap editable preview on the right. A draggable divider lets you resize the panes. Both panes can scroll independently.

Both panes are fully editable. Changes made in the Markdown source editor are rendered instantly in the preview. Changes made in the preview (formatting text, editing content) sync back to the Markdown source via Turndown (HTML to Markdown conversion). The toolbar routes actions to whichever pane has focus.

Edits use surgical diffs to minimize disruption: small changes in one pane are applied as targeted updates in the other, preserving scroll position and cursor state.

Three layout modes are available from the toolbar and the View menu:

• Split (default): Both panes visible side by side, resizable via drag handle
• Editor only: Full-width Markdown source editor, preview hidden
• Preview only: Full-width rendered preview, source editor hidden

Your layout mode preference is saved in localStorage and persists across sessions.

Toggle between dark and light mode using the sun/moon button in the toolbar. The toggle affects the editor themes and the preview rendering. Dark mode uses Solarized Dark for CodeMirror and switches templates to their dark color set. Light mode uses a clean white background.

Zen Mode (Cmd+D) is a distraction-free writing environment. All UI chrome disappears, leaving only a centered markdown editor at 65 characters wide with 18px font size. A floating formatting toolbar appears when you move your mouse to the top of the screen, and a bottom bar shows word count, character count, and a theme switcher.

• 5 built-in themes: Light, Paper, Gray, Dark, Black
• Floating toolbar with Bold, Italic, Strikethrough, Code, Heading, List, and Link buttons
• Theme and settings persist across sessions
• Press Escape or click Exit to return to the main editor

Pro users unlock three additional Zen Mode features: typewriter scrolling (the cursor stays vertically centered while you type), focus dimming (non-active paragraphs fade to 30% opacity), and custom font selection from Google Fonts.

Scroll sync links the scroll positions of both panes using proportional ratio-based mapping. When you scroll in one pane, the other follows to approximately the same position. Scroll sync is enabled by default and can be toggled from the toolbar.

Your work is saved automatically to Supabase with a 30-second debounce. There is no manual save step required. If you close the browser or lose your connection, your latest changes are preserved. You can also press Cmd+S (Mac) or Ctrl+S (Windows) to trigger an immediate save at any time.

Click the pop-out button (pink dot in the menu bar) to open a separate maximized preview window. The pop-out window syncs bidirectionally with the main editor via BroadcastChannel: content, template, and dark mode changes are reflected in both windows in real time. Only one pop-out window can be open at a time.

The left sidebar lists all your documents with filter tabs (All, Published, Drafts). From here you can:

• Create a new document
• Rename a document (editable title field in the top bar)
• Delete a document (with confirmation)
• Switch between open documents via tabs

Free plan users can create up to 5 documents (the welcome template does not count). Pro users have unlimited documents.

Paste or drag-and-drop images directly into the editor. Supported formats: JPEG, PNG, GIF, and WebP. Maximum 5MB per file.

• Free plan: 50MB total image storage
• Pro plan: 1GB total image storage

Images are uploaded to Supabase Storage and referenced by public URL in your Markdown. They display in the preview and on published pages.

Every auto-save creates an immutable version of your document. You can view previous versions in a timeline, preview their content, and restore any version to make it the current document.

Right-clicking in the editor or preview reveals context-specific actions:

• Right-click in the source editor: Bold, Italic, Strikethrough, Code, Link
• Right-click in the preview: Copy as HTML, Copy as Plain Text, Copy as Markdown

On mobile devices, the editor switches to a single-pane view. You can toggle between the source editor and the preview. The toolbar adapts to smaller screens, with less frequently used actions moved into overflow menus.