STORM
A compositor-based terminal UI framework.
Fast. Layered. Unstoppable.

Cell matrix. Live metrics. AI agent. Code diff. All running in a terminal.

Why Storm

Most terminal frameworks treat your terminal like a string printer. Storm treats it like a display server.

Cell-level diff — only changed cells are written. 97% are skipped per frame.
Dual-speed rendering — React for structure, requestRender() for 60fps animation.
Typed-array buffers — Int32Array + Uint8Array. Zero Cell objects. ~90% less GC pressure.
Pure TypeScript — flexbox + CSS Grid layout. Zero native dependencies.

Quick start

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();

That's 10 lines. You have a running TUI with animated spinner and keyboard input.

Build an AI agent terminal in 30 seconds

import React from "react";
import { render, Box, MessageBubble, OperationTree, ApprovalPrompt,
         useTerminal, useTui, useInput } from "@orchetron/storm";

function App() {
  const { width, height } = useTerminal();
  const { exit } = useTui();
  useInput((e) => { if (e.key === "c" && e.ctrl) exit(); });

  return (
    <Box flexDirection="column" width={width} height={height}>
      <MessageBubble role="assistant">I'll fix the bug in auth.ts.</MessageBubble>

      <OperationTree nodes={[
        { id: "1", label: "Reading auth.ts", status: "completed", durationMs: 120 },
        { id: "2", label: "Editing code", status: "running" },
        { id: "3", label: "Running tests", status: "pending" },
      ]} />

      <ApprovalPrompt tool="writeFile" risk="medium" params={{ path: "auth.ts" }} onSelect={() => {}} />
    </Box>
  );
}

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

The OperationTree spinner animates at 80ms through imperative cell mutation — no React state churn, no layout rebuild.

How it renders

Every frame flows through five stages: React → Layout → Buffer → Diff → TTY. Animation frames skip React and Layout entirely — buffer to terminal in 0.5ms.

On a typical scroll frame, 97% of cells are unchanged. Storm skips them entirely — emitting only the bytes for mutated cells. The typed-array buffer eliminates ~30,000 Cell objects per frame.

Other rendering features:

• DECSTBM hardware scroll — terminal-native scroll regions for pure scroll ops
• Optional WASM acceleration — 33KB Rust module for 3.4x faster diff
• Correct grapheme rendering — Intl.Segmenter for ZWJ emoji (👨‍👩‍👧‍👦 = 2 columns, not 8)

DevTools

const app = render(<App />);
enableDevTools(app); // press 1/2/3/4

Render heatmap — see exactly where your UI does unnecessary work.
Accessibility audit — live WCAG 4.5:1 contrast checking on every cell.
Time-travel — freeze, scrub 120 frames, see what changed.
Inspector — component tree, computed styles, FPS, events.

All four run as render middleware — non-blocking, the app keeps running.

What's inside

98 components — Box, Text, ScrollView, Tabs, Modal, Table, DataGrid, Tree, Form, Select, CommandPalette, TextArea, Markdown, DatePicker, Spinner (14 types), DiffView, Calendar, and more. Browse all →
19 AI widgets — OperationTree, MessageBubble, ApprovalPrompt, StreamingText, SyntaxHighlight, MarkdownText, TokenStream, ContextWindow, CostTracker. Browse all →
85 hooks — 4 tiers: Essential, Common, Interactive, and 15 headless behavior hooks. Decision matrix →
12 themes — Arctic, Midnight, Ember, Voltage, Neon, High Contrast + live .storm.css hot-reload. Guide →
Animations — <Transition> enter/exit, <AnimatePresence> mount/unmount, spring physics. Guide →
Plugins — Vim mode, compact mode, auto-scroll, screenshot, status bar. Guide →
i18n — Locales, RTL, pluralization for EN/FR/AR/RU/JA. Guide →
SSH — Serve your app over SSH with built-in auth and rate limiting.

Get started

npx tsx examples/storm-code/index.tsx    # AI coding agent
npx tsx examples/storm-ops/index.tsx     # Operations dashboard
npx tsx examples/devtools-demo.tsx       # DevTools showcase
npx tsx examples/storm-website.tsx       # This README's demo

Getting Started · Components · AI Widgets · Hook Guide · Recipes · Theming · DevTools · Animations · Plugins · Pitfalls · Performance · i18n

_{Built by Orchetron · Contributing · MIT License}