STORM

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

LIVE_SYSTEM.TSX

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

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

92 components, 19 AI widgets, 82 hooks, 15 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

82 Hooks + 15 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.

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

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

TERMINAL

SYSTEM_SPEC_v0.1

COMPONENT
MANIFEST

A definitive index of high-fidelity primitives. Browse all →

Engine DNA Map

REF: PRIM_01

TYPE: LAYOUT

0x1F

crop_free

┌─────┐
│     │
└─────┘

Box

Flex-container core

STATUS: PRODUCTION_READY

REF: PRIM_02

TYPE: CONTENT

0x2A

text_fields

Hello Storm

Text

Glyph-perfect engine

STATUS: PRODUCTION_READY

REF: PRIM_03

TYPE: DATA

0x4E

table_chart

┌───┬───┐
│ A │ B │
├───┼───┤

Table

Virtualized grid

STATUS: PRODUCTION_READY

REF: PRIM_04

TYPE: INTERACT

0x5D

ads_click

> type here_

Input

Event stream buffer

STATUS: PRODUCTION_READY

REF: PRIM_05

TYPE: STATUS

0x7B

progress_activity

⠋ loading...

Spinner

Async lifecycle hook

STATUS: PRODUCTION_READY

REF: PRIM_06

TYPE: VISUAL

0x8C

rebase_edit

████░░░░ 52%

Progress

Step-buffer visualizer

STATUS: PRODUCTION_READY

REF: PRIM_07

TYPE: DECOR

0x9A

border_outer

╭─────╮
│     │
╰─────╯

Border

Cell-aligned strokes

STATUS: PRODUCTION_READY

REF: PRIM_08

TYPE: DATA

0xBF

format_list_bulleted

▸ item 1
  item 2
  item 3

List

Observable collection

STATUS: PRODUCTION_READY

REF: PRIM_09

TYPE: LAYOUT

0xC3

unfold_more

│ content  ▓
│ content  ░
│ content  ░

ScrollView

Virtualized scroll viewport

STATUS: PRODUCTION_READY

REF: PRIM_10

TYPE: OVERLAY

0xD7

picture_in_picture

┌─ Modal ─┐
│ content  │
└──────────┘

Modal

Focus-trapped dialog layer

STATUS: PRODUCTION_READY

REF: PRIM_11

TYPE: VISUAL

0xE1

show_chart

    ╭─╮
╭─╮ │ │
│ ╰─╯ │

LineChart

Time-series data renderer

STATUS: BETA

REF: PRIM_12

TYPE: NAV

0xF4

tab

[Tab 1] Tab 2  Tab 3

STATUS: PRODUCTION_READY

Quick Start

Get Running in 30 Seconds

Install, import, render. That's it.

TERMINAL

$ npm install @orchetron/storm-tui # coming soon

APP.TSX

import React from "react"; import { render, Box, Text, Spinner, useInput, useTui } from "@orchetron/storm-tui"; 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-tui
# coming soon

COMING SOON

Version 0.1.0 (Early Preview) / Launching Soon

STORM

Numbers that matter.

Skip Rate

Frame Time

Components

ENGINEEREDDIFFERENT

Cell-Level Rendering

Dual-Speed Architecture

SSH App Serving

Time-Travel DevTools

82 Hooks + 15 Headless Behaviors

Plugin Ecosystem

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

COMPONENTMANIFEST

Box

Text

Table

Input

Spinner

Progress

Border

List

ScrollView

Modal

LineChart

Tabs

AI AGENTWIDGETS

OperationTree

MessageBubble

ApprovalPrompt

StreamingText

CostTracker

ContextWindow

Get Running in 30 Seconds

UNLEASH THE STORM

ENGINEERED
DIFFERENT

COMPONENT
MANIFEST

AI AGENT
WIDGETS