Post

Claude Canvas: Give Claude Code an External Monitor with This TUI Toolkit

A deep dive into Claude Canvas, the TUI toolkit that gives Claude Code its own external display for interactive terminal interfaces like calendars, flight booking, system monitoring, and more.

Posted
By Michael Masters
7 min read
Claude Canvas: Give Claude Code an External Monitor with This TUI Toolkit

What if Claude Code could have its own monitor? Not just text output in your terminal, but dedicated visual spaces for calendars, dashboards, flight comparisons, and real-time system monitoring—all rendered in beautiful terminal UIs alongside your main conversation.

That’s exactly what Claude Canvas delivers. It’s a TUI (Terminal User Interface) toolkit that spawns interactive terminal interfaces within tmux split panes, giving Claude Code dedicated visual real estate separate from your conversation.

Table of Contents

What is Claude Canvas?

Claude Canvas is a proof-of-concept TUI toolkit created by @dvdsgl that extends Claude Code with visual capabilities. Instead of Claude describing what a calendar looks like or outputting flight data as text, it can now render interactive interfaces in dedicated terminal panes.

Project Stats:

  • 1,357 GitHub stars
  • 136 forks
  • MIT licensed
  • Proof-of-concept status (unsupported)

The key innovation: Claude Code gets an “external monitor”—a separate visual surface where it can render rich, interactive terminal interfaces while your main conversation continues uncluttered.

How It Works

Claude Canvas leverages two key technologies:

  1. tmux - The terminal multiplexer that hosts canvas panes as split windows
  2. Bun - JavaScript runtime that executes the skill tools

When you ask Claude to show you a calendar or compare flights, it spawns a new tmux pane and renders an interactive TUI application there. Your main conversation stays clean while the visual output appears alongside it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

┌─────────────────────────────────────┬──────────────────────────┐
│                                     │                          │
│   Claude Code Conversation          │   Canvas: Calendar       │
│                                     │                          │
│   > Show me my calendar for         │   ┌─────────────────────┐│
│     this week                       │   │ January 2026        ││
│                                     │   ├──┬──┬──┬──┬──┬──┬──┤│
│   Claude: I've opened your          │   │Mo│Tu│We│Th│Fr│Sa│Su││
│   calendar in the canvas pane.      │   ├──┼──┼──┼──┼──┼──┼──┤│
│   You can see your meetings...      │   │27│28│29│30│31│ 1│ 2││
│                                     │   │  │██│  │██│  │  │  ││
│                                     │   └─────────────────────┘│
│                                     │                          │
└─────────────────────────────────────┴──────────────────────────┘

Built-in Canvases

The original repository includes four core canvas types:

Canvas Purpose
calendar Weekly view with meeting time picker
document Markdown viewer/editor with preview modes
flight Flight comparison UI with seat selection
canvas Base canvas component for building custom UIs

These demonstrate the core concept: structured, interactive interfaces that would be tedious to express as plain text.

Extended Fork: 13 Canvas Types

The BEARLY-HODLING fork significantly expands the toolkit with 13 canvas types and multi-terminal support (iTerm2, Apple Terminal, Kitty, WezTerm).

Canvas Use Case
tracker Live aircraft positions with ASCII world map (OpenSky API)
weather Current conditions + 7-day forecast (Open-Meteo API)
system CPU sparklines, memory, disk, top processes
dashboard Unified widget combining weather/system/calendar/clock
pomodoro Work/break timer with session tracking
notes Auto-save scratchpad with search and timestamps
crypto BTC/ETH/SOL prices with 24h sparklines
github PR tracking, repo stats, status indicators
docker Container status monitoring with CPU/memory metrics
network Multi-host ping latency with packet loss
calendar Enhanced weekly view with meeting picker
document Markdown viewer/editor
flight Flight comparison with seat maps

Global Controls

All canvases share common keyboard shortcuts:

  • ? - Help overlay
  • Tab - Canvas navigator (switch between open canvases)
  • q - Exit current canvas

Unique Use Cases

Email Drafting Interface

Instead of Claude outputting email text inline, it renders a structured canvas with dedicated fields:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

┌─────────────────────────────────────────┐
│ From: you@example.com                   │
│ To:   client@company.com                │
│ CC:   team@company.com                  │
│ BCC:                                    │
├─────────────────────────────────────────┤
│ Subject: Q1 Project Update              │
├─────────────────────────────────────────┤
│                                         │
│ Hi Sarah,                               │
│                                         │
│ I wanted to follow up on our...         │
│                                         │
└─────────────────────────────────────────┘

This makes iteration much more natural—you can see the structure while discussing changes.

Calendar/Meeting Scheduling

The calendar canvas visualizes availability, helps find mutual meeting times, and confirms bookings. Instead of Claude describing open slots, you see them:

1
2
3
4
5
6

> Find a time to meet with the design team next week

Claude opens calendar canvas showing:
- Your existing meetings as blocked slots
- Team availability overlaid
- Suggested meeting times highlighted

Flight Booking Comparison

When comparing flights, a visual layout beats walls of text:

1
2
3
4
5
6
7

┌─────────────────────────────────────────────────────────┐
│ SFO → JFK  |  Jan 30, 2026                              │
├─────────────────────────────────────────────────────────┤
│ UA 123  │ 6:00 AM → 2:30 PM │ $342 │ ██░░░░░░ 23 seats │
│ AA 456  │ 8:15 AM → 4:45 PM │ $398 │ ████░░░░ 45 seats │
│ DL 789  │ 11:00 AM → 7:30 PM│ $315 │ █░░░░░░░ 12 seats │
└─────────────────────────────────────────────────────────┘

Real-Time System Monitoring

The system canvas provides live dashboards:

1
2
3
4
5
6
7
8
9
10

┌─ CPU ────────────────┐ ┌─ Memory ─────────────┐
│ ▁▂▃▅▆▇█▇▆▅▃▂▁▂▃▄▅▆  │ │ Used: 12.4 GB / 32 GB│
│ 47% (8 cores)        │ │ ████████░░░░ 39%     │
└──────────────────────┘ └──────────────────────┘
┌─ Top Processes ──────────────────────────────┐
│ PID    NAME           CPU%   MEM%            │
│ 1234   node           12.3   4.2             │
│ 5678   claude-code    8.7    2.1             │
│ 9012   chrome         6.4    8.9             │
└──────────────────────────────────────────────┘

Terminal Vision Feedback Loop

One clever use case emerged from GitHub Issue #5: Claude is “blind” to what it renders. A user discovered you can use tmux capture-pane to let Claude see its own output:

1

tmux capture-pane -t {pane_id} -p

This enables a feedback loop:

  1. Claude pushes JSON → canvas renders
  2. Claude runs capture-pane → sees the output
  3. Claude iterates → fixes layout issues

This turns Claude into a self-correcting TUI designer.

Installation

Requirements

  • Bun - JavaScript runtime (install)
  • tmux - Terminal multiplexer
  • Claude Code - With billing enabled

Steps

1
2
3
4
5

# In Claude Code, add the marketplace
/plugin marketplace add dvdsgl/claude-canvas

# Install the plugin
/plugin install canvas@claude-canvas

For the extended fork with more canvases:

1
2

/plugin marketplace add BEARLY-HODLING/claude-canvas
/plugin install canvas@claude-canvas

Limitations and Workarounds

Simulated Outputs

Currently, the outputs are simulated—flight booking doesn’t actually book flights, calendar doesn’t connect to Google Calendar. The interface framework exists, but real-world API integrations remain in development.

Claude Can’t See What It Renders

As mentioned, Claude is blind to canvas output by default. The tmux capture-pane workaround helps, but it’s not built into the skill itself yet.

tmux Required

The toolkit won’t work in standard terminals without tmux. The extended fork adds support for iTerm2 and Apple Terminal with native split panes or auto-positioned windows.

Proof of Concept Status

This is explicitly unsupported and experimental. Don’t expect production stability.

Claude Canvas has inspired several related projects for Claude Code visualization and monitoring:

Tool Description Link
TmuxCC Centralized dashboard for managing multiple AI coding agents GitHub
claude-code-monitor Real-time multi-session monitoring with mobile web UI + QR access GitHub
claude-code-config TUI for managing ~/.claude.json configurations GitHub
Figma-like spatial canvas Drag-and-drop agent context forking with spatial grouping HN Discussion

The Broader Vision

Alex Stern describes Claude Code as “AI’s spreadsheet moment”—a flexible primitive that beats specialized tools. Claude Canvas extends this vision by giving Claude dedicated visual output, enabling:

  • AI Writing Systems - Style extraction, document management via file-based context
  • PRD Generation - Company-specific standards with iterative refinement
  • MCP-Powered Integration - Pulling context from Google Docs, Jira, Slack
  • Semi-Autonomous Workflows - Claude working with minimal supervision when properly configured

Resources

Official Repository:

Extended Fork:

Related Tools:

Articles:

Conclusion

Claude Canvas represents an intriguing expansion of what’s possible with Claude Code. By giving the AI its own visual output space, it transforms text-heavy interactions into structured, interactive experiences.

While still a proof of concept with simulated outputs, the core idea is compelling: an AI coding assistant that can render calendars, dashboards, flight comparisons, and system monitors in dedicated terminal panes—keeping your main conversation clean while visual data appears alongside it.

For developers comfortable with tmux and terminal-based workflows, Claude Canvas offers a glimpse of a future where AI assistants have rich visual capabilities without leaving the command line.

Last updated: January 2026

claude-code, ai, developer-tools
claude-code tui terminal tmux canvas visualization productivity
This post is licensed under CC BY 4.0 by the author.