🎭 Revue

A Vue-style TUI framework for Rust with CSS styling

Build beautiful terminal UIs with the power of Rust and the elegance of CSS.

Getting Started · Examples · Documentation · Contributing

✨ Highlights

🎨 CSS Styling

Write styles in familiar CSS syntax with variables, selectors, transitions, and animations.

⚡ Reactive State

Vue-inspired Signal/Computed/Effect system for automatic UI updates.

📦 70+ Widgets

Rich widget 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.

🚀 Fast & Lightweight

Pure Rust, single binary, blazing fast performance.

🆚 Comparison

🚀 Quick Start

Add Revue to your project:

cargo add revue

Create your first app:

use revue::prelude::*;

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

    app.run_with_handler(Counter::new(), |event, state| {
        state.handle_event(event)
    })
}

struct Counter { count: i32 }

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

    fn handle_event(&mut self, event: &KeyEvent) -> bool {
        match event.key {
            Key::Up => self.count += 1,
            Key::Down => self.count -= 1,
            Key::Char('q') => return false,
            _ => {}
        }
        true
    }
}

impl View for Counter {
    fn render(&self, ctx: &mut RenderContext) {
        Border::rounded()
            .child(
                vstack().gap(1)
                    .child(Text::new(format!("Count: {}", self.count)).bold())
                    .child(Text::muted("[↑/↓] Change  [q] Quit"))
            )
            .render(ctx);
    }
}

Style with CSS:

/* 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);
}

📦 Widgets

vstack().gap(1).child(/* ... */);
hstack().justify_content(Center);
grid().cols(3).gap(1);
tabs().tab("Home", home_view).tab("Settings", settings_view);

input().placeholder("Enter name...");
textarea().rows(5);
select().options(["Option 1", "Option 2"]);
checkbox("Enable feature");
switch().on_change(|on| /* ... */);

text("Hello").bold().fg(Color::CYAN);
markdown("# Title\n**bold** and *italic*");
table().columns(["Name", "Age"]).rows(data);
progress(0.75).label("Loading...");
image_from_file("logo.png");

modal().title("Confirm").content(/* ... */);
toast("Saved!").level(Success);
tooltip("Click to submit").child(button("Submit"));

barchart().data([("A", 10), ("B", 20), ("C", 15)]);
line_chart().series("Sales", sales_data);
sparkline(cpu_history);

🎯 Examples

cargo run --example counter      # Basic counter
cargo run --example todo         # Todo app
cargo run --example dashboard    # Charts & widgets
cargo run --example markdown     # Markdown viewer
cargo run --example forms        # Form inputs

📚 Documentation

🗺️ Roadmap

🤝 Contributing

Contributions are welcome! See our Contributing Guide for details.

# Clone and setup
git clone https://github.com/hawk90/revue.git
cd revue

# Install git hooks (recommended)
brew install lefthook && lefthook install

# Build and test
cargo build
cargo test

# Run an example
cargo run --example counter

💡 Inspired By

• Textual - CSS styling for TUI
• Ratatui - Rust TUI ecosystem
• Vue.js - Reactivity system

📄 License

MIT License - see LICENSE for details.

⬆ Back to Top

Made with ❤️ by the Revue contributors