Examples & Templates

​

Quick Start

npm create rezi my-app
cd my-app
npm start

npm create rezi my-app --template dashboard

​

Template Catalog

​

Dashboard (Default)

npm create rezi my-app --template dashboard

• Fleet control plane with stable live telemetry updates
• Incident feed with inspector and escalation runbook
• Multi-panel layout with navigation tabs
• Real-time charts and status indicators
• Deterministic update model for production stability

• State management patterns for real-time data
• Layout composition with nested panels
• Live chart updates without flickering
• Navigation and routing
• Theme switching
• Keyboard shortcuts and focus management

​

Minimal

npm create rezi my-app --template minimal

• Single-screen state flow with keybindings
• Theme cycling and inline error handling
• Lean multi-file structure
• Reducer, render, and keybinding test examples
• Hot state-preserving reload support

• Minimal app bootstrap pattern
• Reducer-based state management
• Pure view functions
• Unit testing patterns
• Global keybinding setup

​

CLI Tool

npm create rezi my-app --template cli-tool

• Home, logs, settings, and detail screens
• Router history and focus restoration
• Global route keybindings
• Breadcrumb and tabs helpers wired to router state
• Shell screen for command execution

• Router setup and navigation
• Multi-screen architecture
• Screen-level state isolation
• Breadcrumb navigation
• Command palette integration
• Focus preservation across routes

​

Animation Lab

npm create rezi my-app --template animation-lab

• Reactor command deck with canvas visuals, charts, and gauges
• Staggered module rails with coordinated animations
• Keyboard-driven autoplay and vector nudging
• Burst impulses with resize-aware layout adaptation
• useTransition, useSpring, useSequence, useStagger hooks

• Animation hook patterns
• Canvas drawing integration
• Coordinated multi-element motion
• Responsive layout adaptation
• Spring physics and easing curves
• Staggered entrance animations

​

Starship

npm create rezi my-app --template starship

• Six-screen bridge: Bridge, Engineering, Crew, Cargo, Comms, Settings
• Routing with animated gauges and live telemetry charts
• Command palette, modal dialogs, toast notifications
• Crew management forms with validation
• Split panes, canvas visuals, and theme cycling
• Comprehensive keybinding modes

• Complete widget catalog usage
• Advanced routing patterns
• Form handling and validation
• Modal and overlay management
• Toast notification system
• Command palette integration
• Multi-theme support
• Complex layout composition
• Real-time data visualization

​

Stress Test

npm create rezi my-app --template stress-test

• Three-lane visual benchmark (geometry + text/file activity + matrix rain)
• Phase-based intensity ramp
• Deterministic sim scorecard
• Measured CPU, RSS, lag, timing, and sink throughput
• Real runtime diagnostics

• High-frequency rendering patterns
• Canvas stress testing
• Virtual list performance
• Memory profiling techniques
• Frame timing measurement
• Deterministic load simulation

​

Template Comparison

​

Template Selection Guide

​

Choose minimal if you want:

• A single-screen utility
• Minimal boilerplate
• Fast iteration on a small tool
• To learn Rezi basics

​

Choose dashboard if you want:

• A production-ready starting point
• Real-time data display
• Multi-panel layout patterns
• Live telemetry and monitoring

​

Choose cli-tool if you want:

• Multiple screens with navigation
• Routing and history management
• Task-oriented workflows
• Command execution interface

​

Choose animation-lab if you want:

• To learn animation hooks
• Canvas and visual effects
• Coordinated motion patterns
• Responsive layout adaptation

​

Choose starship if you want:

• To see all 56 widgets in action
• Complete feature reference
• Advanced patterns and composition
• A kitchen-sink showcase

​

Choose stress-test if you want:

• To benchmark your terminal
• Performance profiling tools
• High-load testing patterns
• Runtime diagnostics

​

Example Projects

​

Hello Counter

import { ui } from "@rezi-ui/core";
import { createNodeApp } from "@rezi-ui/node";

const app = createNodeApp<{ count: number }>({
  initialState: { count: 0 },
});

app.view((state) =>
  ui.page({
    p: 1,
    gap: 1,
    header: ui.header({
      title: "Hello Counter",
      subtitle: "Beautiful defaults",
    }),
    body: ui.panel("Counter", [
      ui.row({ gap: 1, items: "center" }, [
        ui.text(`Count: ${state.count}`, { variant: "heading" }),
        ui.spacer({ flex: 1 }),
        ui.button({
          id: "dec",
          label: "-1",
          intent: "secondary",
          onPress: () => app.update((s) => ({ ...s, count: s.count - 1 })),
        }),
        ui.button({
          id: "inc",
          label: "+1",
          intent: "primary",
          onPress: () => app.update((s) => ({ ...s, count: s.count + 1 })),
        }),
      ]),
    ]),
  }),
);

await app.run();

​

Widget Gallery

​

Common Patterns Across Templates

​

Project Structure

project/
├── src/
│   ├── main.ts              # App entry point
│   ├── types.ts             # State and action types
│   ├── theme.ts             # Theme configuration
│   ├── screens/             # View functions
│   │   └── *.ts
│   ├── helpers/             # State logic and utilities
│   │   ├── state.ts         # Reducer
│   │   └── keybindings.ts   # Command resolver
│   └── __tests__/           # Test files
│       ├── render.test.ts
│       ├── reducer.test.ts
│       └── keybindings.test.ts
├── package.json
└── tsconfig.json

​

State Management Pattern

1. Define types in types.ts
2. Create reducer in helpers/state.ts
3. Pure view functions in screens/
4. Wire in main.ts with app.view() and app.keys()

​

Keybinding Pattern

• q — Quit application
• t — Cycle themes
• h or shift+/ — Toggle help
• escape — Close modals/overlays
• Screen-specific keys — Documented in help overlay

​

Theme Support

• dark (default)
• light
• nord
• dracula
• dimmed
• high-contrast

​

Running Examples from Source

git clone https://github.com/RtlZeroMemory/Rezi.git
cd Rezi
git submodule update --init --recursive
npm ci
npm run build

# Run hello counter
cd examples/hello-counter
npm start

# Run widget gallery
cd examples/gallery
npm start

​

Template Customization

1. package.json — Update name, version, description
2. src/types.ts — Define your app state and actions
3. src/helpers/state.ts — Implement reducer logic
4. src/screens/ — Build your views
5. src/main.ts — Wire keybindings and lifecycle

​

Next Steps