Crate revue 

Revue

A Vue-style TUI framework for Rust with CSS styling, reactive state management, and a rich set of widgets for building beautiful terminal user interfaces.

Features

Feature	Description
CSS Styling	External CSS files with variables, selectors, transitions, and hot reload
Flexbox Layout	Powered by taffy for flexible layouts
Reactive State	Vue-inspired Signal/Computed/Effect pattern
80+ Widgets	Text, Button, Input, Table, Tree, Modal, Toast, Charts, and more
Markdown & Images	Built-in markdown rendering with Kitty image protocol support
Developer Tools	Hot reload, widget inspector, snapshot testing (Pilot)
Theming	Built-in themes: Dracula, Nord, Monokai, Gruvbox, Catppuccin

Quick Start

use revue::prelude::*;

fn main() -> Result<()> {
    let mut app = App::builder().build();
    let counter = Counter::new();

    app.run_with_handler(counter, |key, state| {
        state.handle_key(&key.key)
    })
}

struct Counter { value: i32 }

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

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

impl View for Counter {
    fn render(&self, ctx: &mut RenderContext) {
        vstack()
            .child(Text::new(format!("Count: {}", self.value)))
            .child(Text::muted("[↑/↓] to change, [q] to quit"))
            .render(ctx);
    }
}

CSS Styling

Revue supports CSS for styling widgets:

/* styles.css */
:root {
    --primary: #bd93f9;
    --bg: #282a36;
}

.button {
    background: var(--primary);
    color: var(--bg);
    transition: background 0.3s ease;
}

.button:hover {
    background: #ff79c6;
}

Reactive State

use revue::prelude::*;

let count = signal(0);
let doubled = computed(move || count.get() * 2);

effect(move || {
    println!("Count changed to: {}", count.get());
});

count.set(5); // Triggers effect, doubled is now 10

Widget Gallery

Layout

• widget::vstack() / widget::hstack() - Vertical/horizontal stack layout
• widget::Border - Bordered container with title support
• widget::Tabs - Tab navigation
• widget::ScrollView - Scrollable content area
• widget::Layers - Overlapping widgets (for modals, toasts)

Input

• widget::Input - Single-line text input
• widget::TextArea - Multi-line text editor
• widget::Button - Clickable button with variants
• widget::Checkbox - Toggle checkbox
• widget::RadioGroup - Radio button group
• widget::Select - Dropdown selection

Display

• widget::Text - Styled text display
• widget::Markdown - Markdown rendering with syntax highlighting
• widget::Image - Terminal images (Kitty protocol)
• widget::Progress - Progress bar
• widget::Spinner - Loading spinner
• widget::Badge / widget::Tag - Labels and tags
• widget::Avatar - User avatar display
• widget::Skeleton - Loading placeholder

Data

• widget::Table - Data table with columns
• widget::List - Selectable list
• widget::Tree - Hierarchical tree view
• widget::Sparkline - Inline mini chart
• widget::BarChart - Bar chart visualization
• widget::Canvas / widget::BrailleCanvas - Custom drawing

Feedback

• widget::Modal - Dialog overlay
• widget::Toast - Notification popup
• widget::CommandPalette - Fuzzy command search (Ctrl+P)

Module Overview

Module	Description
app	Application lifecycle and event loop
dom	Virtual DOM and rendering tree
event	Keyboard/mouse events and keymaps
layout	Flexbox layout engine
reactive	Signal/Computed/Effect primitives
render	Terminal rendering and buffer
style	CSS parsing and theming
testing	Pilot testing framework
widget	All widget implementations
worker	Background task execution

Testing with Pilot

use revue::testing::{Pilot, TestApp};

#[test]
fn test_counter() {
    let mut app = TestApp::new(Counter::new());
    let mut pilot = Pilot::new(&mut app);

    pilot
        .press(Key::Up)
        .press(Key::Up)
        .assert_contains("2");
}

Themes

Built-in themes available via style::themes:

• Dracula - Dark purple theme
• Nord - Arctic blue theme
• Monokai - Classic dark theme
• Gruvbox - Retro groove theme
• Catppuccin - Pastel dark theme

Comparison with Other Frameworks

Feature	Revue	Ratatui	Textual	Cursive
Language	Rust	Rust	Python	Rust
CSS Styling	✅	❌	✅	❌
Reactive State	✅	❌	✅	❌
Hot Reload	✅	❌	✅	❌
Widget Count	80+	13	35+	40+
Snapshot Testing	✅	❌	❌	❌

Modules

a11y

Screen reader backend integration

app

Application lifecycle and coordination

constants

Common constants used throughout Revue

devtools

Developer tools for Revue applications

dom

DOM (Document Object Model) system for widget styling

event

Event handling and keyboard input

layout

Flexbox layout engine

patterns

Common patterns for TUI applications

plugin

Plugin system for extending Revue applications

prelude

Prelude module for convenient imports.

query

Query DSL for filtering and searching items

reactive

Reactive state management system.

render

Terminal rendering

style

CSS styling system for Revue.

tasks

Task management for async operations in TUI apps

testing

Pilot testing framework for automated UI tests.

text

Unicode and text handling

utils

Common utilities for widget rendering

widget

Widget system for Revue TUI framework.

worker

Worker system for background tasks

Macros

assert_snapshot

Assert that a view matches its snapshot

bordered

Create a border with a child

hstack

Create a horizontal stack with children

impl_props_builders

Generate builder methods for widgets with props: WidgetProps field.

impl_queryable

Helper macro for implementing Queryable

impl_state_builders

Generate builder methods for widgets with state: WidgetState field.

impl_styled_view

Implement StyledView trait for a widget that has a props: WidgetProps field.

impl_view_meta

Implement View::id() and View::meta() for a widget with props: WidgetProps.

impl_widget_builders

Generate all common builder methods for widgets with both state: WidgetState and props: WidgetProps fields.

text

Create text with common styling

translations

Macro for creating translations

ui

Build a complete UI layout declaratively

vstack

Create a vertical stack with children

Enums

Error

Error type for Revue operations.

Type Aliases

Result

Result type alias for Revue operations.