@termuijs/quick

Build terminal apps in around 20 lines. A fluent builder API on top of the TermUI stack. Layout, data binding, theming, and the render loop are handled for you.

Good for dashboards, monitors, and prototypes where you don't need fine-grained control over every widget.

Install

npm install @termuijs/quick

Requires @termuijs/core and @termuijs/widgets.

Usage

import { app, gauge, table, text, sparkline } from '@termuijs/quick'

app('My Dashboard')
    .rows(
        app.cols(
            gauge('CPU', () => 0.65),
            gauge('Memory', () => 0.42),
        ),
        table('Users', {
            columns: ['Name', 'Role'],
            data: () => [
                { Name: 'Alice', Role: 'Admin' },
                { Name: 'Bob', Role: 'User' },
            ],
        }),
    )
    .run()

Builders

Layout

| Builder | What it creates | |---------|----------------| | app(title) | Root container. Call .run() to start | | app.rows(...) | Stack children vertically | | app.cols(...) | Stack children horizontally | | grid(columns, items) | Grid layout; items wrap every N columns |

Display

| Builder | What it creates | |---------|----------------| | text(content) | Static or dynamic text | | streamingText(opts) | Typewriter text; text, speed, cursor | | chatMessage(opts) | Chat bubble; role, content, timestamp | | toolCall(opts) | AI tool call display; name, status, args, result | | jsonView(data) | Collapsible JSON tree | | diffView(diff) | Unified diff viewer from a raw diff string |

Data and feedback

| Builder | What it creates | |---------|----------------| | gauge(label, valueFn) | Live gauge (0.0 to 1.0) | | table(label, config) | Data table from an array of objects | | sparkline(label, dataFn) | Inline chart from an array of numbers | | multiProgress(items) | Multiple labeled progress bars | | commandPalette(commands) | Searchable command menu |

Reactive updates

Pass a function instead of a static value. The framework calls it on each render cycle.

gauge('CPU', () => getCpuUsage())
table('Processes', {
    columns: ['PID', 'Name', 'CPU'],
    data: () => getTopProcesses(10),
})

Re-exported hooks

All major hooks are available directly from @termuijs/quick:

import {
    useKeymap,
    useMotion,
    useTheme,
    useNotifications,
    useAsync,
    useCpu,
    useMemory,
    useDisk,
    useNetwork,
    useTopProcesses,
    useSystemInfo,
    useHttpHealth,
} from '@termuijs/quick'

AI assistant dashboard example

import { app, chatMessage, toolCall, streamingText } from '@termuijs/quick'

app('AI Assistant')
    .rows(
        chatMessage({ role: 'user', content: 'Show me the top processes' }),
        toolCall({ name: 'get_processes', status: 'running' }),
        streamingText({ text: 'Fetching system data...', speed: 40 }),
    )
    .run()

AutoThemeProvider and ErrorBoundary

app() wraps your root in AutoThemeProvider and ErrorBoundary automatically. You get theme detection and error recovery without any extra setup.

Pairs well with @termuijs/data

import { app, gauge } from '@termuijs/quick'
import { useCpu, useMemory } from '@termuijs/quick'

function Monitor() {
    const cpu = useCpu(500)
    const mem = useMemory(1000)
    return app.cols(
        gauge('CPU', () => cpu.usage / 100),
        gauge('MEM', () => mem.used / mem.total),
    )
}

Documentation

Full docs at www.termui.io/docs/guides/quick.

License

MIT