Productivity
document avatar

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
View on GitHub