GitHub - orchetron/storm: A compositor-based terminal UI framework. Fast. Layered. Unstoppable.

A compositor-based terminal UI framework. Fast. Layered. Unstoppable. - orchetron/storm

Summary

Storm is a TypeScript terminal UI framework that runs terminal output through a compositor-style pipeline (React → Layout → Buffer → Diff → TTY) with cell-level diffing and typed-array buffers. It targets Node and is published as @orchetron/storm, exposing React components, hooks, themes, and AI-agent widgets for building interactive TUIs.

What it is useful for

Storm fits when a terminal app needs rich layout, animation, or frequent redraws that a string-printer approach handles poorly. The README describes cell-level diffing that skips cells unchanged between frames (it cites skipping roughly 97% of cells on a typical scroll frame) and uses Int32Array + Uint8Array buffers to avoid per-cell object allocation. An optional 33KB Rust WASM module is available for faster diffing, and DECSTBM hardware scroll regions are used for scroll-only updates. Layout is flexbox and CSS Grid in pure TypeScript with zero native dependencies, and Intl.Segmenter is used for grapheme-correct rendering of ZWJ emoji. Practical targets include AI coding-agent terminals, ops dashboards, code-diff viewers, and any TUI that animates at interactive rates.

How engineers can use it

The README's quick start is a single install and a short component:

npm install @orchetron/storm react

import React from "react";
import { render, Box, Text, Spinner, useInput, useTui } from "@orchetron/storm";

function App() {
  const { exit } = useTui();
  useInput((e) => { if (e.key === "c" && e.ctrl) exit(); });
  return (
    <Box padding={1}>
      <Spinner type="diamond" color="#82AAFF" />
      <Text bold color="#82AAFF"> storm is alive</Text>
    </Box>
  );
}

render(<App />).waitUntilExit();

Pre-built examples can be launched without writing setup code:

npx tsx examples/storm-code/index.tsx
npx tsx examples/storm-ops/index.tsx
npx tsx examples/devtools-demo.tsx
npx tsx examples/storm-website.tsx

For AI-agent interfaces, the package exports widgets such as MessageBubble, OperationTree, and ApprovalPrompt, alongside hooks like useTerminal and useInput. Built-in DevTools (render heatmap, WCAG contrast audit, time-travel, inspector) are enabled with enableDevTools(app) and toggle via keys 1–4. Animations use imperative requestRender() so they bypass React reconciliation and the layout stage. Further behavior — theming, animations, plugins, SSH serving, i18n for EN/FR/AR/RU/JA — is described in the linked docs (e.g. docs/theming.md, docs/plugins.md, docs/i18n.md). The README does not enumerate limitations directly; docs/pitfalls.md and docs/performance.md are referenced for tradeoffs and tuning.