ratatui/examples/README.md

Examples

These gifs were created using Charm VHS.

VHS has a problem rendering some background color transitions, which shows up in several examples below. See https://github.com/charmbracelet/vhs/issues/344 for more info. These problems don't occur in a terminal.

Demo (demo.rs)

This is the demo example from the main README. It is available for each of the backends.

cargo run --example=demo --features=crossterm
cargo run --example=demo --no-default-features --features=termion
cargo run --example=demo --no-default-features --features=termwiz

Barchart (barchart.rs

cargo run --example=barchart --features=crossterm

Block (block.rs)

cargo run --example=block --features=crossterm

Calendar (calendar.rs)

cargo run --example=calendar --features=crossterm widget-calendar

Canvas (canvas.rs)

cargo run --example=canvas --features=crossterm

Chart (chart.rs)

cargo run --example=chart --features=crossterm

Colors (colors.rs)

cargo run --example=colors --features=crossterm

Custom Widget (custom_widget.rs)

cargo run --example=custom_widget --features=crossterm

This is not a particularly exciting example visually, but it demonstrates how to implement your own widget.

Gauge (gauge.rs)

Please note: the background renders poorly when we generate this example using VHS. This problem doesn't generally happen during normal rendering in a terminal. See https://github.com/charmbracelet/vhs/issues/344 for more details

cargo run --example=gauge --features=crossterm

Hello World (hello_world.rs)

cargo run --example=hello_world --features=crossterm

This is a pretty boring example, but it contains some good comments of documentation on some of the standard approaches to writing tui apps.

Inline (inline.rs)

cargo run --example=inline --features=crossterm

Layout (layout.rs)

cargo run --example=layout --features=crossterm

List (list.rs)

cargo run --example=list --features=crossterm

Modifiers (modifiers.rs)

cargo run --example=modifiers --features=crossterm

Panic (panic.rs)

cargo run --example=panic --features=crossterm

Paragraph (paragraph.rs)

cargo run --example=paragraph --features=crossterm

Popup (popup.rs)

cargo run --example=popup --features=crossterm

Please note: the background renders poorly when we generate this example using VHS. This problem doesn't generally happen during normal rendering in a terminal. See https://github.com/charmbracelet/vhs/issues/344 for more details

Scrollbar (scrollbar.rs)

cargo run --example=scrollbar --features=crossterm

Sparkline (sparkline.rs)

cargo run --example=sparkline --features=crossterm

Table (table.rs)

cargo run --example=table --features=crossterm

Tabs (tabs.rs)

cargo run --example=tabs --features=crossterm

User Input (user_input.rs)

cargo run --example=user_input --features=crossterm