Architecture

System design and conceptual overview.

System Overview

rte is a terminal-based React rendering engine that captures, stores, and replays React component render states in a deterministic environment.

Core Components

1. React Reconciler (src/core/)

• Implements React Reconciler interface
• Captures every render transaction
• Converts React elements to layout trees

2. Yoga Layout Engine (src/layout/)

• Uses Facebook's Yoga for flexbox layout
• Calculates component dimensions and positions
• Outputs layout tree with x, y, width, height

3. Frame Buffer (src/renderer/)

• Maps layout nodes to terminal cells
• Applies ANSI styling for colors/effects
• Generates frame snapshots

4. Causality System (src/deterministic/)

• Tracks cause-and-effect of state changes
• Enables session replay with exact frame sequence
• No timing-dependent behavior

Rendering Pipeline

1. Component Mount/Update → React calls reconciler
2. Reconciler Processing → Creates element tree
3. Layout Calculation → Yoga computes positions
4. Frame Generation → Buffer renders to text
5. Frame Storage → Session captures frame
6. Output → CLI displays frame

Session System

A session is a JSON file containing:

• Frames — Array of render snapshots
• Metadata — Timestamp, component info
• Tree — Full component hierarchy

Capabilities

• Replay — Step through frames sequentially
• Diff — Compare two sessions for divergence
• Verify — Compare against known-good snapshots

v1.0.0 Capabilities

• Basic React component rendering
• Session recording and replay
• Session comparison/diff
• CLI with unified error handling
• Benchmark runner

Known Limitations

• No interactive user input simulation
• Limited CSS support (flexbox only)
• No server-side rendering support
• Large component trees may impact performance