Terminal UI Overview

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/badlogic/pi-mono/llms.txt

Use this file to discover all available pages before exploring further.

​

Key Features

​

Installation

npm install @mariozechner/pi-tui

​

Quick Start

import { TUI, Text, Editor, ProcessTerminal } from "@mariozechner/pi-tui";

const terminal = new ProcessTerminal();
const tui = new TUI(terminal);

tui.addChild(new Text("Welcome to my app!"));

const editor = new Editor(tui, editorTheme);
editor.onSubmit = (text) => {
  console.log("Submitted:", text);
  tui.addChild(new Text(`You said: ${text}`));
};
tui.addChild(editor);

tui.start();

​

Core Concepts

​

Component Interface

interface Component {
  render(width: number): string[];
  handleInput?(data: string): void;
  invalidate?(): void;
}

​

Differential Rendering

1. First Render - Output all lines without clearing
2. Width/Viewport Change - Clear and full re-render
3. Normal Update - Only render changed lines

​

Overlays

const handle = tui.showOverlay(component, {
  width: "80%",
  anchor: "center",
  maxHeight: 20,
});

handle.hide();

​

Built-in Components

• Container - Groups child components
• Box - Container with padding and background
• Text - Multi-line text with word wrapping
• TruncatedText - Single-line truncated text
• Input - Single-line text input
• Editor - Multi-line editor with autocomplete
• Markdown - Rendered markdown with syntax highlighting
• Loader - Animated loading spinner
• SelectList - Interactive selection list
• SettingsList - Settings panel with value cycling
• Image - Inline images (Kitty/iTerm2)
• Spacer - Vertical spacing

​

Next Steps