Markdown editing

Markdown editing

Click any .md, .markdown, or .mdx file. It opens as a tab. Above the tab content sits the toolbar pill — mode toggle on the left, formatting tools that scroll horizontally if needed.

Three modes

Mode	Surface	Use it for
Preview	Real GFM render via MarkdownUI	Reading. Reviewing. Sharing your screen.
Source	Raw markdown, monospace, paragraph-scoped syntax highlighting	Heavy editing. Find/replace. Pasting tables.
Split	Source on the left, rendered on the right	Drafting + checking layout simultaneously.

Single-click a card opens in Preview by default. Double-click opens in Split. The mode is per-panel and persists across relaunch.

Preview supports

• Headings (1–6)
• Paragraphs, line breaks
• Bold, italic, inline code
• Bulleted, numbered, and task lists (with checkboxes)
• Block quotes
• Fenced code blocks with syntax highlighting (via MarkdownUI's GitHub theme)
• Tables (GFM pipe syntax)
• Links and images
• Horizontal rules
• Inline HTML (limited — anything WebKit's HTML→AttributedString translator handles)

If you want to edit, switch to Source or Split.

Source supports

The Source view is an NSTextView. Standard Mac text editing: find via the system find bar (⌘F), undo/redo, multi-select, drag-select, font scaling.

Syntax highlighting runs against the edit range only — not the full file — so editing line 4000 of a long PRD doesn't re-scan the other 3,999 lines. The fallback to a full re-scan kicks in when an edit straddles a code-fence boundary; otherwise it stays incremental.

Highlighted constructs:

• Headings (size scales with level: # = 24pt, ## = 20pt, ### = 17pt, …)
• Bold (font weight bumped)
• Italic (italic descriptor)
• Inline code (monospace, orange)
• Fenced code blocks (monospace orange body, no syntax-aware highlighting inside)
• Links [text](url) (blue)
• Lists (teal markers)
• Block quotes (grey)

The toolbar pill

The pill above the pane has, in order:

1. Mode segment — Preview / Source / Split
2. Headings menu — H1 / H2 / H3 / H4
3. Bold — wraps selection in **…**
4. Italic — wraps in *…*
5. Inline code — wraps in `…`
6. Bulleted list — prefixes selected lines with -
7. Numbered list — prefixes with 1.
8. Task list — prefixes with - [ ]
9. Quote — prefixes with >
10. Link — wraps in [text](https://)
11. Table — popover, hover-pick rows × columns, click to insert

If a button is hidden behind the pane edge, scroll the pill horizontally.

The toolbar only edits when there's an editor — pressing Bold in Preview mode is a no-op. Switch to Source or Split first.

Autosave

A 500ms debounce. Type a burst, pause, file lands on disk. Atomic write, off the main thread, so even big files don't hitch the editor.

Closing the tab (or quitting the app) flushes the pending edit synchronously — you won't lose what you just typed.

Caveats

• External edits while open will be overwritten by the next save. Soffit doesn't yet detect file mtime conflicts. If you vim a file in another window while it's open in Soffit, save in Soffit last.
• Hidden-syntax editing isn't a feature anymore. v0.2 had a WYSIWYG-ish mode that hid ** and # markers while you typed. It couldn't lay out tables, so v0.3 retired it. Preview now means "rendered", not "rendered while typing".
• The Source highlighter uses regex, not tree-sitter. Some pathological edge cases (deeply nested fences, inline HTML containing markdown) may temporarily look wrong until the next edit re-scans.

Mermaid diagrams

Files with the .mmd extension don't open as markdown — they open in a mermaid panel. Drop one on a canvas, or click it from the sidebar. Soffit injects the diagram source into a local HTML shim that renders via vendored mermaid.js (no internet needed).