Skip to content

TermUI Docs

What is TermUI?

TermUI is a TypeScript framework for building terminal user interfaces. You get a flexbox layout engine, a JSX runtime with React-style hooks, global state management, theming, spring animations, file-based routing, and a hot-reload dev server. Pure TypeScript. No curses bindings. No C extensions.

The framework ships as 13 packages. Each package handles one concern. You install only what you need. @termuijs/core gives you the screen buffer, layout engine, and input parser. Add @termuijs/widgets for Box, Text, and Table. Add @termuijs/jsx for functional components and hooks. Everything composes.

How to use the docs

The docs are organized into three sections:

  • Getting Started: Step-by-step guides to install TermUI, scaffold a project, and understand the architecture.
  • Guides: Focused tutorials for specific tasks. Pick the ones relevant to your project.
  • API Reference: Technical reference for every package, organized by module.

Use the sidebar to navigate sections, or search (Ctrl+K / Cmd+K) to find a page.

Architecture

TermUI follows a five-layer dependency model. Higher layers depend on lower layers. No circular dependencies.

Toolingdev-server, testing, create-termui-app
Applicationquick, data
Featurejsx, store, router, motion, tss
Componentwidgets, ui
Corecore

Every layer depends only on the layers below it. You never install more than you need.

Pre-requisite knowledge

The docs assume basic TypeScript and Bun familiarity. These will help:

  • TypeScript (types, interfaces, async/await)
  • Bun (running scripts, bun install, stdin/stdout)
  • Terminal basics (ANSI escape codes are handled for you, but knowing they exist helps)

If you know React, the JSX package will feel familiar. If you do not, the widget-tree API works without JSX.

Next Steps
All Packages
@termuijs/core

Screen buffer, input parsing, event system, flexbox layout engine.

@termuijs/widgets

Box, Text, Table, ProgressBar, Spinner, Gauge, VirtualList.

@termuijs/ui

Select, Tabs, Modal, Toast, Tree, MultiSelect, CommandPalette.

@termuijs/jsx

Custom JSX runtime with useState, useEffect, useRef, useContext, useAsync, and memo().

@termuijs/store

Zustand-style global state. Selector-based subscriptions; only changed components re-render.

@termuijs/tss

Terminal Style Sheets. CSS-like theming with variables, pseudo-classes, and hot-reload.

@termuijs/router

File-based screen routing with typed params, guards, and history.

@termuijs/motion

Spring-physics and easing-based animations for terminal widgets.

@termuijs/data

Real-time system data providers: CPU, memory, disk, network, processes.

@termuijs/quick

Fluent builder API. Build a full dashboard layout in ~20 lines.

@termuijs/testing

In-memory test renderer. render, query, fireKey, assert. No real terminal needed.

@termuijs/dev-server

Hot-reload dev server. File watcher restarts your app in under 200ms.

@termuijs/create-termui-app

Project scaffolding CLI. Templates for dashboards, interactive tools, and CLI wrappers.