Stitchable

Stitchable is a performance-focused, minimal, and dependency-free Terminal User Interface (TUI) engine for Node.js.

Inspired by Blessed (Double-buffered rendering, layout borders) and Bubble Tea (The Elm Architecture, predictable state updates), Stitchable enables developers to create highly interactive command-line interfaces that boot instantly (<15ms) and draw smoothly without screen flickering.

Features

• The Elm Architecture (TEA): Unidirectional data flow (Model -> Update -> View -> Cmd).
• Double-Buffered Renderer: Compares virtual frames cell-by-cell and batches stdout writes using run-length diffing.
• Zero Dependencies: Pure TypeScript/ESM running natively on Node without heavy native build steps or WebAssembly.
• Automatic Layout Flow: Sequential layouts using vstack and hstack containers.
• Aesthetic Styling: Support for HEX codes (#6366f1), standard 16-color names, and truecolor gradients.

Installation

npm install stitchable

Make sure your package.json contains "type": "module".

Quick Start (Interactive Counter)

import { Program, box, text, vstack } from 'stitchable';

const initialState = { count: 0 };

function update(model, msg) {
  if (msg.type === 'key') {
    const key = msg.event.key;
    if (key === 'up' || key === '+') return [{ count: model.count + 1 }, null];
    if (key === 'down' || key === '-') return [{ count: model.count - 1 }, null];
    if (key === 'q' || key === 'escape') return [model, () => process.exit(0)];
  }
  return [model, null];
}

function view(model) {
  return box(
    { width: '100%', height: '100%', bg: '#121214', fg: '#e2e8f0' },
    vstack(
      { x: 'center', y: 'center', width: 50, height: 12, gap: 1 },
      box(
        { width: '100%', height: 3, bg: '#6366f1', fg: 'white', bold: true, border: 'round' },
        text({ x: 'center', y: 0 }, ' STITCHABLE TUI COUNTER ')
      ),
      box(
        { x: 'center', width: 30, height: 5, bg: '#202024', fg: 'bright-cyan', border: 'double', borderFg: '#6366f1' },
        text({ x: 'center', y: 1, bold: true }, `Value: ${model.count}`)
      )
    )
  );
}

const app = new Program({ model: initialState, update, view });
app.start();

Documentation

To learn more about the layouts, styling, custom widgets creation, and full API references, check the dedicated guides in the docs/ folder:

• Architecture Philosophy & Lifecycle
• Full API Reference Guide
• Custom Components & Extensibility Guide

License

MIT