# Bearly Hodling Claude Canvas Claude Canvas

> Document Canvas

- Skill: `tomevault-io/bearly-hodling-claude-canvas-claude-canvas` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/bearly-hodling-claude-canvas-claude-canvas`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/bearly-hodling-claude-canvas-claude-canvas/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/bearly-hodling-claude-canvas-claude-canvas

---


# Document Canvas

Display markdown documents with optional text selection and diff highlighting.

## Scenarios

### `display` (default)
Read-only document view with markdown rendering. User can scroll but cannot select text.

```bash
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

```bash
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.

```bash
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

```typescript
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](url)`)
- **Lists** (`-` or `*` bullets)
- **Blockquotes** (`>`)

## Selection Result

```typescript
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

```typescript
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}`);
}
```

---
> Source: [BEARLY-HODLING/claude-canvas](https://github.com/BEARLY-HODLING/claude-canvas) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-22 -->