Document canvas for displaying and editing markdown content. Use when showing documents, emails, or when users need to select text for editing.
Display markdown documents with optional text selection and diff highlighting.
Try asking Claude:
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"
}'
editInteractive document view with text selection. User can click and drag to select text, which is sent via IPC in real-time.
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-previewSpecialized 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"
}'
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";
}
Supported markdown features:
# H1, ## H2, etc.)**text**)*text*)`inline` and fenced blocks)[text](url))- or * bullets)>)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;
}
↑/↓ or scroll: Navigate documentq or Esc: Close/cancelimport { 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}`);
}