Widgets Overview

npm install @termuijs/widgets

import { App } from '@termuijs/core'
import { Box, Text, ProgressBar, Spinner } from '@termuijs/widgets'

// Create widgets
const title = new Text('Dashboard', { bold: true, fg: 'cyan' })
const spinner = new Spinner({}, { preset: 'dots', color: { type: 'named', name: 'green' } })
const loadingText = new Text('Loading data...')
const cpuLabel = new Text('CPU Usage')
const cpuBar = new ProgressBar({ width: 30 }, { value: 0.73, fillColor: { type: 'named', name: 'green' } })

// Compose layout
const row = new Box({ flexDirection: 'row', gap: 2 })
row.addChild(spinner)
row.addChild(loadingText)

const column = new Box({ flexDirection: 'column', gap: 1 })
column.addChild(cpuLabel)
column.addChild(cpuBar)

const root = new Box({ border: 'round', padding: 1, flexDirection: 'column', gap: 1 })
root.addChild(title)
root.addChild(row)
root.addChild(column)

// Mount
const app = new App(root, { fullscreen: true })
await app.mount()
// ╭──────────────────────────────────╮
// │ Dashboard                        │
// │ ⠋ Loading data...               │
// │ CPU Usage                        │
// │ ████████████████████░░░░░ 73%    │
// ╰──────────────────────────────────╯

import { App } from '@termuijs/core'
import { VirtualList } from '@termuijs/widgets'

const list = new VirtualList({
    totalItems: 1_000_000,
    renderItem: (index) => `Log line \${index}: some message content`,
    onSelect:   (index) => console.log('Selected:', index),
})

const app = new App(list, { fullscreen: true })
app.events.on('key', (e) => {
    if (e.key === 'up')    list.selectPrev()
    if (e.key === 'down')  list.selectNext()
    if (e.key === 'enter') list.confirm()
    if (e.key === 'home')  list.selectFirst()
    if (e.key === 'end')   list.selectLast()
})
await app.mount()

// Handles 1M items. renders ~26 rows with scrollbar

import { Box, Text, Gauge, StatusIndicator, ProgressBar } from '@termuijs/widgets'

// Build a status row. Second arg is the up/down flag.
const apiStatus = new StatusIndicator('API', true)
const dbStatus = new StatusIndicator('DB', true)
const cacheStatus = new StatusIndicator('Cache', false)

const statusRow = new Box({ flexDirection: 'row', gap: 4 })
statusRow.addChild(apiStatus)
statusRow.addChild(dbStatus)
statusRow.addChild(cacheStatus)

// Resource gauges
const cpuBar = new ProgressBar({ width: 40 }, { value: 0.72, fillColor: { type: 'named', name: 'green' } })
const memBar = new ProgressBar({ width: 40 }, { value: 0.58, fillColor: { type: 'named', name: 'cyan' } })
const diskGauge = new Gauge('Disk')
diskGauge.setValue(0.45)

const panel = new Box({ flexDirection: 'column', gap: 1 })
panel.addChild(statusRow)
panel.addChild(new Text('Resource Usage', { dim: true }))
panel.addChild(cpuBar)
panel.addChild(memBar)
panel.addChild(diskGauge)

import { LogView } from '@termuijs/widgets'

const logs = new LogView({
    maxLines: 1000,
    autoScroll: true,
})

logs.append({ text: '[INFO]  Server started', color: 'green' })
logs.append({ text: '[WARN]  Memory usage high', color: 'yellow' })
logs.append({ text: '[ERROR] Connection reset', color: 'red' })

import { Table } from '@termuijs/widgets'

const table = new Table({
    columns: [
{ key: 'pid',  header: 'PID',     width: 8  },
{ key: 'name', header: 'Process',  width: 20 },
{ key: 'cpu',  header: 'CPU%',     width: 8, align: 'right' },
{ key: 'mem',  header: 'Memory',   width: 10 },
    ],
    rows: processes,
})