Render HTML Dashboards
Directly in Your Terminal

See It In Action

TuiMon renders directly inside your terminal — including the VS Code integrated terminal. No browser tabs, no separate windows. Your dashboards live right next to your code, so you never need to leave your IDE.

Live API Dashboard

A full production dashboard with stats, traffic charts, service health, event logs, and endpoint distribution — all rendered in a VS Code terminal panel while you code.

TuiMon rendering a live API dashboard directly in the VS Code integrated terminal

Nginx Access Log Analysis

Point TuiMon at an access log and get an instant request table with color-coded status codes, all inside your editor. No log viewer needed.

tuimon access.log rendering a request table directly in VS Code — never leave your IDE

Everything You Need

TuiMon bridges web development and terminal UIs. Write dashboards with the tools you already know — HTML, CSS, JavaScript, Chart.js, D3 — and render them pixel-perfect in any modern terminal.

Quick Start

npm install -g tuimon

tuimon init
tuimon start

# Visualize any file instantly
tuimon data.json
tuimon sales.csv
tuimon access.log

# Watch a data source
tuimon watch metrics.js
tuimon watch --url http://localhost:3000/metrics

# Built-in dashboards
tuimon docker
tuimon git
tuimon ps

Custom HTML Dashboards

Build dashboards with standard web technologies. TuiMon auto-injects a client script that receives live data updates. Use any charting library, any CSS framework, any JavaScript you want.

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px;">
  <div>
    <h3>CPU Usage</h3>
    <canvas id="cpuChart"></canvas>
  </div>
  <div id="memValue" style="font-size: 48px;">--</div>
</div>

<script>
  // Receive live data from TuiMon
  TuiMon.onUpdate(function(data) {
    TuiMon.set('#memValue', data.memory + '%')
    updateChart(data.cpu)
  })
</script>

Configure pages, shortcuts, and F-key bindings in tuimon.config.ts:

export default {
  pages: {
    overview: { html: './pages/overview.html', default: true },
    cpu:      { html: './pages/cpu-detail.html', shortcut: 'g', label: 'CPU Detail' },
    memory:   { html: './pages/memory-detail.html', shortcut: 'm', label: 'Memory' },
  },
  refresh: 1000,
  data: async () => ({
    cpu: getCpuPercent(),
    memory: getMemPercent(),
    uptime: process.uptime(),
  }),
  keys: {
    F5: { label: 'Refresh', action: async () => dash.render(await getData()) },
    F10: { label: 'Quit', action: () => process.exit(0) },
  },
}

A custom HTML dashboard with real-time traffic charts, node health indicators, and event logs

Declarative Mode

Don't want to write HTML? Define your dashboard entirely in TypeScript. TuiMon generates a dark-themed dashboard with the widgets you specify.

import tuimon from 'tuimon'

const dash = await tuimon.start({
  layout: {
    title: 'Production API',
    stats: [
      { id: 'users', label: 'Users Online', type: 'stat' },
      { id: 'cpu', label: 'CPU', type: 'gauge' },
      { id: 'memory', label: 'Memory', type: 'gauge' },
    ],
    panels: [
      { id: 'traffic', label: 'Traffic', type: 'line', span: 2 },
      { id: 'services', label: 'Services', type: 'status-grid' },
      { id: 'endpoints', label: 'Endpoints', type: 'doughnut' },
      { id: 'events', label: 'Events', type: 'event-log', throttle: 2000 },
      { id: 'latency', label: 'Response Times', type: 'bar' },
    ],
  },
  refresh: 500,
  data: () => ({
    users: 1847,
    cpu: 67,
    memory: 54,
    traffic: { Requests: 312, Errors: 10, 'Latency (ms)': 80 },
    services: ['API Gateway', 'Auth Service', 'Database', 'CDN'],
    endpoints: { '/api/users': 35, '/api/orders': 25, '/api/auth': 20 },
    events: ['Deploy v2.4.1 completed'],
    latency: { p50: 42, p75: 68, p90: 125, p95: 210, p99: 450 },
  }),
})

Smart data format — just send what you have. TuiMon figures out the rest:

• 42 → stat card
• 73 (for gauge widget) → percentage bar
• { Requests: 340, Errors: 12 } → auto-accumulating line chart
• ['Deploy completed'] → timestamped event log
• ['Node-1', 'Node-2'] → status grid with health indicators

A declarative dashboard with traffic monitoring, service health grid, event log, and response time percentiles

Quick Mode — Zero Config

Point TuiMon at any file and get an instant dashboard. It auto-detects the format, parses the data, builds an appropriate layout, and watches for changes.

JSON File Visualization

tuimon users.json — auto-detected table with role distribution and score histogram

CSV File Visualization

tuimon sales-2024.csv — monthly revenue trends, category breakdown, and data preview

Log File Analysis

tuimon access.log — request timeline, status code breakdown, HTTP methods, and top endpoints

Built-in Presets

Ready-made dashboards for common developer tasks. No configuration, no data files — just run the command.

Docker Dashboard

Live container stats with CPU/memory charts, status grid, and event log. Press L for container logs.

tuimon docker

Live Docker container monitoring with CPU/memory line charts and status indicators

Git Repository Analysis

Commit frequency, top contributors, most changed files, and recent commit log.

tuimon git

Git repository analysis with 30-day commit history, contributors, and file change frequency

Process Monitor

Live system stats with top CPU/memory processes, load averages, and process table.

tuimon ps

Real-time process monitoring with CPU/memory charts and sortable process list

Dependency Analysis

Analyze package-lock.json, yarn.lock, or pnpm-lock.yaml. Shows total deps, duplicates, version conflicts.

tuimon package-lock.json

Dependency analysis with package table, most-depended-on chart, and version conflict detection

npm Downloads Dashboard

Track download stats for any set of npm packages. Pass names as arguments or save a .tuimon-npm.json config file. Shows per-package totals, a daily trend chart for all packages, and a share breakdown. Switch between Last Week, Last Month, and Last Year with the clickable buttons or F1/F2/F3. Press a shortcut key on any stat card to drill into that package's detail view. Up to 12 packages, no API key needed.

tuimon npm @markdownai/core @markdownai/engine strictdb

npm Downloads dashboard with per-package stat cards, daily trend comparison, and total share breakdown

Database Viewer

View database tables directly in your terminal. TuiMon auto-detects your project's database driver from node_modules/ and reads the connection string from .env. No new dependencies needed.

# View a table
tuimon db users

# Custom queries
tuimon db "SELECT * FROM users WHERE active = true"
tuimon db users --query '{"active": true}'   # MongoDB

# Connection options
tuimon db users --uri "mongodb://localhost:27017/myapp"
tuimon db users --env MY_DB_URI

# Live watch mode
tuimon db users --watch
tuimon db users --watch --interval 5000

Supported databases: MongoDB, PostgreSQL, MySQL, SQLite

tuimon db users — MongoDB collection with query results, pagination, and keyboard navigation

Keyboard Control

TuiMon uses native terminal stdin for keyboard handling. No terminal UI frameworks needed. The F-key status bar at the bottom shows available bindings for the current page.

Custom F-Key Bindings

keys: {
  F1:  { label: 'Help',    action: () => showHelp() },
  F5:  { label: 'Refresh', action: async () => dash.render(await getData()) },
  F9:  { label: 'Export',  action: () => exportCSV() },
  F10: { label: 'Quit',    action: () => process.exit(0) },
}

Page Shortcuts

Assign single-letter shortcuts to pages for instant navigation:

pages: {
  overview: { html: './overview.html', default: true },
  cpu:      { html: './cpu.html', shortcut: 'g', label: 'CPU Detail' },
  memory:   { html: './memory.html', shortcut: 'm', label: 'Memory' },
  network:  { html: './network.html', shortcut: 'n', label: 'Network' },
}

Mouse Support

Most terminal UIs have no mouse support. The ones that do typically handle a basic click-to-focus. TuiMon does something different: every click and scroll passes through to a real Chromium browser running behind the terminal image, and right-click is mapped to hover. You are not approximating interactivity - you have a fully functional website running directly in your terminal.

Enable it with one option:

const dash = await tuimon.start({
  pages: { ... },
  mouse: true,  // that's all
})

What You Get

Left click maps your terminal cursor position to exact browser pixel coordinates and fires a real click event. Whatever JavaScript is listening for that click in your HTML page fires. Chart.js registers it. Custom handlers register it. Links follow. Buttons activate.

Right-click is mapped to hover. It dispatches a synthetic mousemove at that position without moving the real browser cursor - which matters because moving the actual cursor changes its shape to an I-beam, and that leaks into the screenshot. Right-clicking a data point on a Chart.js series fires its tooltip cleanly. There is no passive hover (moving your terminal cursor does not trigger mouseover events) - right-click is how you target a position for hover-style inspection.

Scroll wheel dispatches a WheelEvent on the element directly under the cursor, so scrollable panels and charts respond exactly as they would in a browser.

After every interaction, TuiMon re-renders the page automatically. You see the result in your terminal within a single frame.

Real-World Uses

Right-click a line on a Chart.js graph to fire the tooltip for that data point. Click a row in a custom HTML table to trigger a detail view. Scroll a log panel that overflows its container. Click a button that calls your backend and re-renders with fresh data. All of this works without any special TuiMon integration - just write normal HTML and JavaScript.

Terminal Compatibility

Mouse mode enables SGR extended mouse reporting (?1000h ?1006h) in the terminal. Every terminal TuiMon supports already has this - Kitty, Ghostty, WezTerm, iTerm2, and VSCode all work without any additional configuration. TuiMon disables mouse reporting cleanly on exit.

Terminal Support

TuiMon auto-detects your terminal's graphics protocol. No configuration needed.

VSCode users: Run tuimon init to automatically enable terminal.integrated.enableImages: true in your workspace settings.

Run tuimon check to verify your terminal supports graphics protocols and see detected pixel dimensions.

Widget Types

Eight built-in widget types for declarative dashboards. Each accepts simple data and renders automatically.

Per-Widget Throttle

Each widget can update at its own speed. High-frequency data (charts) updates every frame while slow-changing data (status, events) throttles independently.

panels: [
  { id: 'chart', type: 'line' },                        // every frame
  { id: 'events', type: 'event-log', throttle: 2000 },  // max every 2s
  { id: 'health', type: 'status-grid', throttle: 5000 },// max every 5s
]

API Reference

Programmatic API

import tuimon from 'tuimon'

// Start returns a dashboard handle
const dash = await tuimon.start({
  pages: { ... },      // Page definitions
  layout: { ... },     // Or declarative layout (no pages needed)
  data: () => ({ ... }),  // Data provider function
  refresh: 500,        // Auto-refresh interval (ms)
  renderDelay: 100,    // Delay before screenshot after data push
})

// Push data manually
await dash.render({
  cpu: 73,
  memory: 54,
  requests: 312,
})

// Graceful shutdown
await dash.stop()

Client-Side API

The TuiMon object is auto-injected into every served HTML page:

// Listen for data updates
TuiMon.onUpdate(function(data) {
  document.getElementById('cpu').textContent = data.cpu + '%'
})

// Set element values by selector
TuiMon.set('#memory', '54%')
TuiMon.set('#status', { textContent: 'OK', style: 'color: green' })

// Show temporary notification in F-key bar
TuiMon.notify('Data exported!', 3000)

Data Attributes

Add keyboard shortcut badges to HTML elements automatically:

<!-- Shows [G] badge on the panel -->
<div data-tm-key="g" data-tm-label="CPU Detail">
  CPU Usage: 73%
</div>

CLI Commands