Rezi
Rezi — TypeScript TUI, Near-Native Performance. Powered by deterministic C engine.
Install / Use
/learn @RtlZeroMemory/ReziREADME
Status: Pre-alpha — under active development and changing rapidly. Public APIs, ABI expectations, and behavior may change between releases, and Rezi is not yet recommended for production workloads.
What Rezi Can Do
Rezi is a high-performance terminal UI framework for TypeScript. You write declarative widget trees — a native C engine handles layout diffing and rendering.
- 56 built-in widgets — layout primitives, form controls, data tables, virtual lists, navigation, overlays, a code editor, diff viewer, and more
- Canvas drawing — sub-character resolution via braille (2×4), sextant (2×3), quadrant (2×2), and halfblock (1×2) blitters; draw lines, shapes, and gradients within a single terminal cell grid
- Charts & visualization — line charts, scatter plots, heatmaps, sparklines, bar charts, gauges, and mini charts — all rendered at sub-character resolution
- Inline image rendering — display PNG, JPEG, and raw RGBA buffers using Kitty, Sixel, or iTerm2 graphics protocols, with automatic blitter fallback
- Terminal auto-detection — identifies Kitty, WezTerm, iTerm2, Ghostty, Windows Terminal, and tmux; enables the best graphics protocol automatically, with env-var overrides for any capability
- Performance-focused architecture — binary drawlists + native C framebuffer diffing; benchmark details and caveats are documented in the Benchmarks section
- Ink compatibility layer — run existing Ink CLIs on Rezi with minimal changes (import swap or dependency aliasing), plus deterministic parity diagnostics; details: Porting guide · Ink Compat architecture
- JSX without React — optional
@rezi-ui/jsxmaps JSX directly to Rezi VNodes with zero React runtime overhead - Deterministic rendering — same state + same events = same frames; versioned binary protocol, pinned Unicode tables
- Hot state-preserving reload — swap widget views or route tables in-process during development without losing app state or focus context
- Syntax tokenizer utilities — shared lexical highlighters for TypeScript/JS/JSON/Go/Rust/C/C++/C#/Java/Python/Bash with custom-tokenizer hooks
- Advanced deterministic layout — intrinsic sizing,
flexShrink/flexBasis,alignSelf, wrapped text layout, grid spans/explicit placement, absolute positioning, and stability-signature relayout skipping - 6 built-in themes — dark, light, dimmed, high-contrast, nord, dracula; switch at runtime with one call
- Declarative animation APIs — numeric hooks (
useTransition,useSpring,useSequence,useStagger) andui.boxtransition props for position/size/opacity motion - Record & replay — capture input sessions as deterministic bundles for debugging and automated testing
Showcase
EdgeOps Control Plane
A production-style terminal control console built entirely with Rezi.
Image Rendering
How It Works
You write declarative widget trees in TypeScript. Rezi computes layout and emits a compact binary drawlist (ZRDL). A native C engine — Zireael — diffs framebuffers and writes only changed cells to the terminal.
Most JavaScript TUI frameworks generate ANSI escape sequences in userland on every frame. Rezi moves the hot path out of JavaScript — rendering stays ergonomic at the top and fast on real workloads.
Benchmarks
22 scenarios across primitive workloads (tree construction, rerender, layout), terminal-level rendering (full PTY write path), and full-app UI composition. All 8 frameworks run in PTY mode.
Representative numbers
Numbers from a single-replicate full run on Apple M4 Pro (macOS arm64, PTY mode). Directional, not publication-grade.
| Scenario | Rezi | Ink | OpenTUI Core | Ratatui | blessed | |---|---:|---:|---:|---:|---:| | rerender | 330µs | 19.22ms | 1.26ms | 70µs | 39µs | | tree-construction (100 items) | 153µs | 24.16ms | 1.51ms | 913µs | 1.70ms | | tree-construction (1000 items) | 1.31ms | 79.60ms | 17.35ms | 2.33ms | 19.14ms | | terminal-full-ui | 1.14ms | 22.34ms | 1.32ms | 258µs | 314µs | | terminal-strict-ui | 873µs | 22.14ms | 1.27ms | 183µs | 302µs | | terminal-virtual-list (100K) | 644µs | 22.32ms | 1.28ms | 121µs | 124µs | | scroll-stress (2000 items) | 6.99ms | 182ms | 32.58ms | — | — |
Rezi is the fastest TypeScript/JavaScript framework across all measured scenarios. terminal-kit, blessed, and Ratatui are lower-level libraries (no layout engine or no widget system); they are faster on primitive output scenarios, and slower or absent on workloads requiring structured layout and widget composition.
Memory at terminal-full-ui (peak RSS)
| Framework | Peak RSS | |---|---| | Ratatui | 2.9 MB | | Rezi | 129 MB | | OpenTUI (Core) | 131 MB | | blessed | 260 MB | | Ink | 301 MB | | OpenTUI (React) | 1,010 MB |
Running benchmarks
# Prerequisites: build Rezi, then ensure bun/cargo are in PATH
npm ci && npm run build && npm run build:native && npx tsc -b packages/bench
# Quick run — all 8 frameworks
PATH="$HOME/.cargo/bin:$HOME/.bun/bin:$PATH" \
REZI_BUN_BIN="$HOME/.bun/bin/bun" \
node --expose-gc packages/bench/dist/run.js \
--suite all --io pty --quick --output-dir benchmarks/local-all
See BENCHMARKS.md for full results, all scenarios, scenario definitions, methodology caveats, and advanced run options.
Quick Start
Get running in under a minute:
npm create rezi my-app
cd my-app
npm start
Or with Bun:
bun create rezi my-app
cd my-app
bun start
Starter templates: dashboard, stress-test, cli-tool, animation-lab, minimal, and starship (command console).
Example
ui.* API
import { ui } from "@rezi-ui/core";
import { createNodeApp } from "@rezi-ui/node";
const app = createNodeApp<{ count: number }>({
initialState: { count: 0 },
});
app.view((s) =>
ui.page({
p: 1,
gap: 1,
header: ui.header({ title: "Counter", subtitle: "Beautiful defaults" }),
body: ui.panel("Count", [
ui.row({ gap: 1, items: "center" }, [
ui.text(String(s.count), { variant: "heading" }),
ui.spacer({ flex: 1 }),
ui.button({
id: "inc",
label: "+1",
intent: "primary",
onPress: () => app.update((prev) => ({ count: prev.count + 1 })),
}),
]),
]),
}),
);
app.keys({ q: () => app.stop() });
await app.start();
Install:
npm install @rezi-ui/core @rezi-ui/node
JSX (No React Runtime)
@rezi-ui/jsx maps JSX directly to Rezi VNodes.
/** @jsxImportSource @rezi-ui/jsx */
import { createNodeApp } from "@rezi-ui/node";
import { Column, Row, Spacer, Text, Button } from "@rezi-ui/jsx";
const app = createNodeApp<{ count: number }>({
initialState: { count: 0 },
});
app.view((s) => (
<Column p={1} gap={1}>
<Text variant="heading">Counter</Text>
<Row gap={1} items="center">
<Text variant="heading">{String(s.count)}</Text>
<Spacer flex={1} />
<Button
id="inc"
label="+1"
intent="primary"
onPress={() => app.update((prev) => ({ count: prev.count + 1 }))}
/>
</Row>
</Column>
));
app.keys({ q: () => app.stop() });
await app.start();
npm install @rezi-ui/jsx @rezi-ui/core @rezi-ui/node
Features
56 built-in widgets — primitives (box, row, column, text, grid), form inputs (input, button, checkbox, select, slider), data display (table, virtual list, tree), navigation (tabs, accordion, breadcrumb, pagination), overlays (modal, dropdown, toast, command palette), advanced (code editor with built-in/custom syntax tokenization, diff viewer, file picker, logs console), and visualization (canvas, image, line chart, scatter, heatmap, sparkline, bar chart, gauge, mini chart).
Graphics & Visualization
| Widget | Description |
|---|---|
| ui.canvas | Programmable drawing surface with braille, sextant, quadrant, halfblock, or ASCII blitters |
| ui.image | Inline images via Kitty, Sixel, iTerm2, or blitter fallback |
| ui.lineChart | Multi-series line charts at sub-character resolution |
| ui.scatter | Scatter plots with configurable point styles |
| ui.heatmap | Heatmap grids with automatic color scaling |
| ui.sparkline | Inline sparklines (text mode or high-res canvas mode) |
| ui.barChart | Horizontal bar charts |
| ui.gauge | Progress and percentage gauges |
| ui.miniChart | Compact inline charts |
Terminal Graphics Protocol Support
Rezi auto-detects your terminal emulator and enables the best available graphics protocol:
| Terminal | Graphi
