tui-canvas: Skill for OpenCode

Document Canvas

Display markdown documents with syntax highlighting and optional text selection.

Example Prompts

• "Draft an email to the marketing team about the Q1 product launch"
• "Help me edit this blog post - show it so I can review"
• "Write a project proposal and let me see it"
• "Show me the README so I can review sections"
• "Compose a response to this customer complaint"

Scenarios

display (default)

Read-only document view with markdown rendering.

canvas_document({
  content: "# Hello World\n\nThis is **markdown** content.",
  title: "My Document",
  scenario: "display"
})

edit

Interactive document view with text selection support.

• Renders markdown with syntax highlighting
• Click and drag to select text
• Selection reported via IPC

canvas_document({
  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",
  scenario: "edit"
})

email-preview

Specialized view for email content display.

canvas_document({
  content: "Dear Team,\n\nPlease review the attached document.\n\nBest regards,\nAlice",
  title: "RE: Project Update",
  scenario: "email-preview"
})

Tool Parameters

canvas_document({
  content: string,      // Required: Markdown content to display
  title?: string,       // Optional: Document title (shown in header)
  scenario?: string     // Optional: "display" | "edit" | "email-preview"
})

Markdown Support

The document canvas renders these markdown features:

• Headers - # H1, ## H2, ### H3, etc.
• Bold - **text**
• Italic - *text*
• Code - Inline `code` and fenced code blocks
• Links - [text](url)
• Lists - Unordered (-, *) and ordered (1.)
• Blockquotes - > quoted text
• Horizontal rules - ---

Keyboard Controls

• Arrow keys or scroll: Navigate document
• q or Esc: Close canvas