STORM

Compositor-based terminal UI framework. Fast. Layered. Unstoppable.

LIVE_SYSTEM.TSX

import { render, Box, Text, Spinner } from "@orchetron/storm";

const App = () => (
  <Box borderStyle="round" padding={1}>
    <Spinner type="dots" />
    <Text bold color="#82AAFF">
      Storm is running
    </Text>
  </Box>
);

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

Performance DNA

Numbers that matter.

Skip Rate

Cell-level diff renders only changed characters. 97% of the terminal is untouched on a typical frame.

Frame Time

Sub-millisecond imperative rendering path. No React reconciliation for scroll, animation, or live data.

Components

97 components, 15 AI widgets, 83 hooks, 20 headless behaviors. Everything you need, built in.

Differentiators

ENGINEERED
DIFFERENT

The architecture decisions that make Storm fast, flexible, and production-ready.

grid_on

Cell-Level Rendering

Storm diffs at the individual character level -- only changed cells are written to the terminal. On a typical frame, 97% of the screen is untouched. Typed-array buffers eliminate GC pressure entirely.

speed

Dual-Speed Architecture

Structure your UI with React components. Animate at 60fps with imperative rendering. Two rendering paths, zero compromise -- declarative when you want clarity, imperative when you need speed.

terminal

SSH App Serving

Serve your terminal UI over SSH with built-in auth, rate limiting, and session management. Each connection gets its own isolated React tree with full keyboard, mouse, and resize support.

history

Time-Travel DevTools

Record every frame. Scrub back and forth through render history. Inspect component trees, measure performance, audit accessibility -- all built in. Explore →

webhook

83 Hooks + 20 Headless Behaviors

Build any interaction pattern without writing keyboard handling from scratch. Select, list, menu, tree, table, form, calendar -- tested logic, your visual design.

extension

Plugin Ecosystem

Extend everything. Async setup, scoped effects, inter-plugin communication, topological dependency sorting. Build plugins that ship as npm packages.

grain

Buffer-Level Backgrounds

Dot grids, line grids, gradients, watermarks, animated patterns — painted directly into the cell buffer. One prop on any Box. No other terminal framework has this.

palette

12 Themes + Live CSS

12 built-in themes. Custom themes via createTheme(). Personality system for borders, animation, typography. Live .storm.css hot-reload with CSS-like selectors and specificity.

Internals

Rendering Pipeline

From React tree to ANSI escape codes. Five stages. Sub-millisecond. Deep dive →

Stage 01

React Tree

<Box>

├─ <Text>

├─ <ScrollView>

│ ├─ <List>

│ └─ <Item> MUT

└─ <StatusBar>

Custom reconciler transforms JSX into a normalized element tree.

Stage 02

Layout Engine

flex:2

Pure-TS flexbox + CSS grid. Computes position and size for every node.

Stage 03

Cell Buffer

char

attr

char

attr

Int32Array + Uint8Array

Typed arrays: char, fg, bg, attrs per cell. Double-buffered.

Stage 04

Diff Engine

14 skipped 2 written

97% of cells skipped. Only mutations written.

Stage 05

Terminal

\x1b[1;1H\x1b[2K

\x1b[38;2;130;170;255m

Storm

\x1b[3;8H

\x1b[1m\x1b[38;2;158;206;106m

Ready\x1b[0m

\x1b[?25l

\x1b[1;1H\x1b[2K

\x1b[38;2;130;170;255m

Storm

\x1b[3;8H

\x1b[1m\x1b[38;2;158;206;106m

Ready\x1b[0m

\x1b[?25l

Batched ANSI escapes. Single write call per frame.

Stage 01

React Tree

<Box>

├─ <Text>

└─ <Item> MUT

Custom reconciler transforms JSX into a normalized element tree.

Stage 02

Layout Engine

flex:2

Pure-TS flexbox + CSS grid. Computes position and size for every node.

Stage 03

Cell Buffer

char

attr

Typed arrays: char, fg, bg, attrs per cell. Double-buffered.

Stage 04

Diff Engine

97% of cells skipped. Only mutations written.

Stage 05

Terminal

\x1b[3;8H

\x1b[38;2;130;170;255m

Storm

Batched ANSI escapes. Single write call per frame.

React Tree / Layout Engine / Cell Buffer / Diff Engine / Terminal

Architecture 01

Cell-Level Diffing

A 200x50 terminal has 10,000 cells. On a cursor blink, 9,970 cells are identical to the previous frame. Storm writes only the 30 that changed.

Traditional 10,000 cells rewritten

Every cell. Every frame.

Storm 2 cells written

97% untouched. Zero waste.

cells per frame

cells written

skip rate

No Cell objects. No GC. Int32Array + Uint8Array — raw typed memory. At 60fps, that's 600,000 cells/second with zero garbage collection.

Architecture 02

Dual-Speed Rendering

React reconciliation for structural changes. Imperative requestRender() for scroll, animation, and live data — bypasses React entirely. Two rendering paths, one framework.

setState path ~5-10ms per update

reconcile

→

layout

→

paint

→

diff

4 stages

requestRender() path <0.5ms per update

paint

→

diff

2 stages — 10-20x faster

Use useState for structural changes (new screens, adding items). Use requestRender() for anything that updates frequently — scroll, animation, live metrics. Same framework, two speed modes.

Live Demo

See It In Action

Cell matrix opening. Streaming AI response. Live metrics. Code diff. All running in a terminal.

TERMINAL

SYSTEM_SPEC_v0.1

97

Components. Everything you need.

Input Data Layout Visualization Feedback Core Navigation Content

15 AI Widgets 83 Hooks 20 Headless Behaviors 12 Themes

Browse all components →

TERMINAL

◆ storm-monitor ● CPU 45% │ ● MEM 62%

CPU ▁▃▅▇▅▃▁▃▅▇ 45%

MEM ██████░░░░ 62%

SYSTEM HEALTH ● NOMINAL

97 ▁▃▅▇▅▃▁▂▄▆█▆▄▂▁▂▄▆█ ▄▆█
42 ─────────────────────

Processes Network Logs

NAMECPU%MEM

node12.4284MB

docker3.8420MB

postgres2.1156MB

storm 1.2K tok · $0.00 · 98%

AGENT_TOOLKIT

15

AI Agent Widgets. Built for what comes next.

OperationTree MessageBubble StreamingText ApprovalPrompt CostTracker ContextWindow SyntaxHighlight TokenStream

Chat interfaces · Coding agents · Autonomous systems

Browse all widgets →

AGENT SESSION

› Fix the token refresh bug in auth.ts

◆ Found the bug. The refresh timer doesn't account for clock skew...

✓ Reading src/auth.ts 340ms

✓ Analyzing token logic 1.2s

○ Patching refreshToken()

○ Running tests

src/auth.ts

- if (Date.now() < token.expiresAt) {

+ const buffer = 30_000;

+ if (Date.now() < token.expiresAt - buffer) {

Apply patch to 3 files?

Allow Deny

storm agent 8.4K tok · $0.12 · ████░░ 62%

Quick Start

Get Running in 30 Seconds

Install, import, render. That's it.

Gradient

▓▒░░░▒▓

Heatmap

████

Paginator

‹ 1 2 3 ›

Timer

02:34

Card

╭─────╮

│ Hi │

╰─────╯

Image

┌────┐

│▓▒░ │

└────┘

Stopwatch

00:12.4

▸ File

Edit

BarChart

█ █

█ █ █

█ █ █ █

Heading

Title

Drawer

│Nav │

│Item│

SplitPane

left │ right

Countdown

05:00

Kbd

Ctrl+C

Spinner

● Analyzing...

Badge

● Online ● Warn

Sparkline

▁▃▅▇▅▃▁▃▅▇ 45%

Gauge

[██████░░] 75%

Select

▸ Option A

Option B

Option C

ProgressBar

██████░░ 72%

Checkbox

[x] Dark mode

[ ] Notify

Table

Name CPU MEM

node 12% 284M

docker 4% 420M

Modal

Confirm?

[Yes] [No]

LineChart

▁▂▄▆█▆▄▂▃▅▇

Accordion

▾ Details

Hidden content

▸ More

Toast

✓ Saved!

RadioGroup

◉ Small

○ Medium

○ Large

DiffView

- old line

+ new line

Stepper

●──●──○

Calendar

Mo Tu We Th

1 2 3 4

ScrollView

│ content ▓

│ content ░

Alert

⚠ Error found

Tabs

Status Logs Config

TextInput

› search...│

Tree

▸ src/

├ index.ts

└ app.tsx

Switch

━━●━ ON

Separator

──────────

Breadcrumb

Home > Docs > API

TERMINAL

$ npm install @orchetron/storm

APP.TSX

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 borderStyle="round" borderColor="#82AAFF" padding={1}>
      <Spinner type="dots" color="#82AAFF" />
      <Text bold color="#82AAFF"> Storm is running</Text>
    </Box>
  );
}

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

UNLEASH THE STORM

$ npm install @orchetron/storm

GET STARTED

Available Now

STORM

Numbers that matter.

Skip Rate

Frame Time

Components

ENGINEEREDDIFFERENT

Cell-Level Rendering

Dual-Speed Architecture

SSH App Serving

Time-Travel DevTools

83 Hooks + 20 Headless Behaviors

Plugin Ecosystem

Buffer-Level Backgrounds

12 Themes + Live CSS

Rendering Pipeline

React Tree

Layout Engine

Cell Buffer

Diff Engine

Terminal

React Tree

Layout Engine

Cell Buffer

Diff Engine

Terminal

Cell-Level Diffing

Dual-Speed Rendering

See It In Action

97

15

Get Running in 30 Seconds

UNLEASH THE STORM

ENGINEERED
DIFFERENT