Markdown Preview

The file editor includes a live markdown preview for .md files, rendering GitHub Flavored Markdown with syntax-highlighted code blocks and Mermaid diagrams.

ClawIDE Markdown Preview
Markdown preview with rendered code blocks and Mermaid diagrams

How It Works

When you open a markdown file in the File Editor, a preview toggle becomes available. The preview renders your markdown in real time as you edit. You can view the preview on its own (full mode) or beside the editor (side-by-side mode).

Supported Features

  • GitHub Flavored Markdown — Tables, task lists, strikethrough, autolinks
  • Syntax Highlighting — Fenced code blocks with language-specific highlighting via Highlight.js
  • Mermaid Diagrams — Flowcharts, sequence diagrams, Gantt charts, class diagrams, and more
  • Line Breaks — Newlines are preserved without requiring double-space or <br>
  • Table of Contents — A navigable outline of your document’s headings
  • Synced Scrolling — The editor and preview stay aligned in side-by-side mode

Table of Contents

In full preview mode, a table of contents appears alongside documents with two or more headings. It lists every heading as a clickable link, and the entry for the section you’re currently viewing is highlighted as you scroll.

Synced Scrolling

In side-by-side mode, the editor and preview scroll together. ClawIDE aligns the two panes by their headings so that the section you’re editing stays in view in the preview — and scrolling either pane moves the other. When headings can’t be matched, it falls back to proportional scrolling based on document position.

Mermaid Diagrams

Wrap diagram definitions in a mermaid fenced code block:

```mermaid
flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do something]
    B -->|No| D[Do something else]
```

Diagrams render inline with a dark theme. Supported diagram types include flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, and more.