revue

/rɪˈvjuː/ — Re + Vue — A Vue-style TUI framework for Rust

Quick Start · Tutorials · Examples · Documentation · Contributing

Why Revue?

Build terminal UIs like you build web apps — with CSS and reactive state.

• CSS Styling — Write styles in familiar CSS syntax with variables, selectors, and animations
• Reactive State — Vue-inspired Signal/Computed/Effect system for automatic UI updates
• 100+ Widgets — Rich component library: inputs, tables, charts, markdown, images, and more
• Hot Reload — See CSS changes instantly without restarting your app
• Developer Tools — Widget inspector, snapshot testing, and performance profiler built-in
• Single Binary — Pure Rust, no runtime dependencies, blazing fast

Quick Start

cargo add revue

use revue::prelude::*;

fn main() -> Result<()> {
    let mut app = App::builder()
        .style("styles.css")
        .build();

    let counter = Counter::new();
    app.run(counter, |event, counter, _app| {
        if let Event::Key(key) = event {
            counter.handle_key(&key.key)
        } else {
            false
        }
    })
}

struct Counter {
    count: Signal<i32>,
}

impl Counter {
    fn new() -> Self {
        Self { count: signal(0) }
    }

    fn handle_key(&mut self, key: &Key) -> bool {
        match key {
            Key::Up => { self.count.update(|n| *n += 1); true }
            Key::Down => { self.count.update(|n| *n -= 1); true }
            _ => false,
        }
    }
}

impl View for Counter {
    fn render(&self, ctx: &mut RenderContext) {
        let count = self.count.get();
        vstack()
            .class("container")
            .child(Text::new(format!("Count: {}", count)).bold())
            .child(
                hstack().gap(1)
                    .child(Text::new("↑/↓ to change, q to quit"))
            )
            .render(ctx);
    }
}

/* styles.css */
.container {
    padding: 2;
    gap: 1;
    border: rounded cyan;
    align-items: center;
}

button {
    padding: 0 2;
    background: var(--primary);
}

button:hover {
    background: var(--primary-dark);
}

Key Features

Reactive Forms

Automatic validation with type-safe form state:

use revue::patterns::form::FormState;

let form = FormState::new()
    .field("email", |f| f
        .label("Email")
        .email()
        .required())
    .field("password", |f| f
        .label("Password")
        .password()
        .min_length(8))
    .field("confirm", |f| f
        .label("Confirm Password")
        .password()
        .matches("password"))
    .build();

// Reactive validation - errors auto-update when values change
form.set_value("email", "invalid");
assert!(!form.is_valid());

form.set_value("email", "user@example.com");
// Validation automatically recalculates

See Forms Tutorial for complete guide.

Animation System

Rich animations with easing functions and keyframes:

use revue::animation::{Animation, Easing};

// Fade in with custom easing
text("Hello!")
    .animation(Animation::fade_in()
        .duration(300)
        .easing(Easing::EaseInOutCubic))

// Slide in from left
text("Welcome!")
    .animation(Animation::slide_in_left()
        .duration(500)
        .delay(100))

// Keyframe animation
text("Pulsing!")
    .animation(Animation::keyframe(|keyframes| {
        keyframes
            .at(0, |kf| kf.scale(1.0).opacity(1.0))
            .at(50, |kf| kf.scale(1.2).opacity(0.8))
            .at(100, |kf| kf.scale(1.0).opacity(1.0))
    }))

Worker Pool

Execute background tasks without blocking the UI:

use revue::worker::{WorkerHandle, WorkerPool};

// Spawn blocking task
let handle = WorkerHandle::spawn_blocking(|| {
    heavy_computation()
});

// Use worker pool
let pool = WorkerPool::new(4);
pool.submit(|| {
    fetch_data_from_api()
});

// Get result when ready
if let Some(result) = handle.try_recv() {
    // Update UI with result
}

Hot Reload

CSS changes update instantly without restart:

let mut app = App::builder()
    .style("styles.css")
    .hot_reload(true)  // Enable hot reload
    .build();

app.run(view, handler)?;

Edit styles.css and see changes immediately - no restart needed!

DevTools

Built-in widget inspector and profiler:

let mut app = App::builder()
    .devtools(true)  // Enable devtools
    .build();

app.run(view, handler)?;

Keyboard shortcuts:

• Ctrl+D — Toggle devtools overlay
• Ctrl+I — Open widget inspector

Features:

• Widget inspector with computed styles
• Performance profiler for identifying bottlenecks
• Snapshot testing for UI regression testing

Widgets

100+ Widgets — See FEATURES.md for complete catalog

Key Features

Reactive Forms

Automatic validation with type-safe form state:

use revue::patterns::form::FormState;

let form = FormState::new()
    .field("email", |f| f
        .label("Email")
        .email()
        .required())
    .field("password", |f| f
        .label("Password")
        .password()
        .min_length(8))
    .field("confirm", |f| f
        .label("Confirm Password")
        .password()
        .matches("password"))
    .build();

// Reactive validation - errors auto-update when values change
form.set_value("email", "invalid");
assert!(!form.is_valid());

form.set_value("email", "user@example.com");
// Validation automatically recalculates

See Forms Tutorial for complete guide.

Animation System

Rich animations with easing functions and keyframes:

use revue::animation::{Animation, Easing};

// Fade in with custom easing
text("Hello!")
    .animation(Animation::fade_in()
        .duration(300)
        .easing(Easing::EaseInOutCubic))

// Slide in from left
text("Welcome!")
    .animation(Animation::slide_in_left()
        .duration(500)
        .delay(100))

// Keyframe animation
text("Pulsing!")
    .animation(Animation::keyframe(|keyframes| {
        keyframes
            .at(0, |kf| kf.scale(1.0).opacity(1.0))
            .at(50, |kf| kf.scale(1.2).opacity(0.8))
            .at(100, |kf| kf.scale(1.0).opacity(1.0))
    }))

Worker Pool

Execute background tasks without blocking the UI:

use revue::worker::{WorkerHandle, WorkerPool};

// Spawn blocking task
let handle = WorkerHandle::spawn_blocking(|| {
    heavy_computation()
});

// Use worker pool
let pool = WorkerPool::new(4);
pool.submit(|| {
    fetch_data_from_api()
});

// Get result when ready
if let Some(result) = handle.try_recv() {
    // Update UI with result
}

Hot Reload

CSS changes update instantly without restart:

let mut app = App::builder()
    .style("styles.css")
    .hot_reload(true)  // Enable hot reload
    .build();

app.run(view, handler)?;

Edit styles.css and see changes immediately - no restart needed!

DevTools

Built-in widget inspector and profiler:

let mut app = App::builder()
    .devtools(true)  // Enable devtools
    .build();

app.run(view, handler)?;

Keyboard shortcuts:

• Ctrl+D — Toggle devtools overlay
• Ctrl+I — Open widget inspector

Features:

• Widget inspector with computed styles
• Performance profiler for identifying bottlenecks
• Snapshot testing for UI regression testing

Examples

# Basics
cargo run --example counter       # Reactive counter with Signal
cargo run --example todo          # Full-featured todo app
cargo run --example hello_world   # Minimal "Hello World"

# UI Components
cargo run --example form          # Form validation demo
cargo run --example dashboard     # Charts and data widgets
cargo run --example gallery       # Widget showcase

# Advanced
cargo run --example animations    # Animation system
cargo run --example worker        # Background tasks
cargo run --example slideshow     # Terminal presentations
cargo run --example ide           # Rich text editor

# Real-world
cargo run --example chat          # Multi-user chat
cargo run --example data_explorer # JSON/CSV viewer

Browse all examples in the examples/ directory.

Tutorials

Guides

Comparison

Documentation

• Getting Started — 5-minute tutorial
• Widget Catalog — Complete widget reference
• App Builder Guide — Complete App Builder API reference
• Styling Guide — CSS properties and theming
• State Management — Signals, Computed, Effects
• API Reference — Full API documentation
• Architecture — System design

Contributing

We welcome contributions! See CONTRIBUTING.md for guidelines.

git clone https://github.com/hawk90/revue.git
cd revue && cargo test

Development workflow:

1. Fork the repository
2. Create a feature branch (feat/your-feature, fix/your-bug)
3. Make your changes with tests
4. Run cargo test and cargo clippy
5. Submit a pull request

License

MIT License — see LICENSE for details.