Productivity
document
Interactive terminal canvas for rendering, editing, and selecting markdown text, emails, and project documentation in Claude Code.
Introduction
The Document Canvas is a specialized TUI (Terminal User Interface) component for Claude Code that enables rich, interactive markdown display and editing directly within a tmux split pane. Designed for developers, writers, and power users, it bridges the gap between text-based terminal output and graphical document interactions. It allows the agent to present structured content—such as draft emails, technical documentation, project proposals, or blog posts—in a clean, readable format while simultaneously providing interactive hooks for the user.
Key features include:
- Markdown rendering with support for headers, bold, italics, code blocks, links, lists, and blockquotes.
- Real-time diff highlighting, visually marking additions and deletions within the text for easier review.
- Interactive text selection using mouse click-and-drag, which captures specific regions of the document for subsequent processing by the agent.
- Specialized view modes, including read-only display for final documentation and an interactive 'edit' mode for collaborative revision.
- IPC-based communication that allows Claude to receive precise coordinates, line numbers, and selected strings from the terminal environment.
Practical usage notes:
- The skill requires a tmux environment and a terminal emulator with mouse support to function correctly.
- Input is provided via JSON configuration objects, typically specifying document content, titles, and optional diff arrays.
- Output is handled through IPC, returning a structured data object containing the selected text, start/end offsets, and line/column positions, enabling seamless integration into workflows like code refactoring, email drafting, or documentation updates.
- The tool is best used when the agent needs to present multi-paragraph content that is too dense for standard chat output, or when the user needs to perform targeted edits on specific sections of a generated document.
- Use cases range from simple 'read-only' previews of README files to complex 'edit-and-select' cycles during technical documentation drafting or email composition.
Repository Stats
- Stars
- 1,479
- Forks
- 142
- Open Issues
- 6
- Language
- TypeScript
- Default Branch
- main
- Sync Status
- Idle
- Last Synced
- Apr 30, 2026, 11:05 AM