document

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";
}