Document Canvas

Display markdown documents with optional text selection and diff highlighting.

Example Prompts

Try asking Claude:

• "Draft an email to the marketing team about the Q1 product launch"

• "Help me edit this blog post — show it so I can highlight the parts to revise"

• "Write a project proposal and let me review it"

• "Show me the README so I can select sections to update"

• "Compose a response to this customer complaint"

Scenarios

display (default)

Read-only document view with markdown rendering. User can scroll but cannot select text.

bun run src/cli.ts show document --scenario display --config '{ "content": "# Hello World\n\nThis is markdown content.", "title": "My Document" }'

edit

Interactive document view with text selection. User can click and drag to select text, which is sent via IPC in real-time.

• Renders markdown with syntax highlighting (headers, bold, italic, code, links, lists, blockquotes)

• Diff highlighting: green background for additions, red for deletions

• Click and drag to select text

• Selection automatically sent via IPC

bun run src/cli.ts spawn document --scenario edit --config '{ "content": "# My Blog Post\n\nThis is the introduction to my post.\n\n## Section One\n\n- Point one\n- Point two", "title": "Blog Post Draft", "diffs": [ {"startOffset": 50, "endOffset": 62, "type": "add"} ] }'

email-preview

Specialized view for email content display.

bun run src/cli.ts show document --scenario email-preview --config '{ "content": "Dear Team,\n\nPlease review the attached document.\n\nBest regards,\nAlice", "title": "RE: Project Update" }'

Configuration

interface DocumentConfig { content: string; // Markdown content title?: string; // Document title (shown in header) diffs?: DocumentDiff[]; // Optional diff markers for highlighting readOnly?: boolean; // Disable selection (default: false for edit) }

interface DocumentDiff { startOffset: number; // Character offset in content endOffset: number; type: "add" | "delete"; }

Markdown Rendering

Supported markdown features:

• Headers (# H1 , ## H2 , etc.)

• Bold (text )

• Italic (text )

• Code (inline and fenced blocks)

• Links (text )

• Lists (- or * bullets)

• Blockquotes (> )

Selection Result

interface DocumentSelection { selectedText: string; // The selected text startOffset: number; // Start character offset endOffset: number; // End character offset startLine: number; // Line number (1-based) endLine: number; startColumn: number; // Column in start line endColumn: number; }

Controls

• Mouse click and drag: Select text (edit scenario)

• ↑/↓ or scroll: Navigate document

• q or Esc : Close/cancel

API Usage

import { editDocument, displayDocument } from "${CLAUDE_PLUGIN_ROOT}/src/api";

// Display read-only document await displayDocument({ content: "# My Document\n\nContent here.", title: "View Mode", });

// Interactive editing with selection const result = await editDocument({ content: "# My Document\n\nSelect some text here.", title: "Edit Mode", diffs: [{ startOffset: 20, endOffset: 30, type: "add" }], });

if (result.success && result.data) { console.log(Selected: "${result.data.selectedText}"); console.log(Position: ${result.data.startOffset}-${result.data.endOffset}); }