ratatui/examples

Examples

This folder contains examples that are more app focused. There are also other examples in example folders under each crate folder e.g. ratatui examples, ratatui-widgets examples.

You can run these examples using:

cargo run -p example-name

This folder might use unreleased code. Consider viewing the examples in the latest branch instead of the main branch for code which is guaranteed to work with the released ratatui version.

Warning

There may be backwards incompatible changes in these examples, as they are designed to compile against the main branch.

There are a few workaround for this problem:

• View the examples as they were when the latest version was release by selecting the tag that matches that version. E.g. https://github.com/ratatui/ratatui/tree/v0.26.1/examples.
• If you're viewing this file on GitHub, there is a combo box at the top of this page which allows you to select any previous tagged version.
• To view the code locally, checkout the tag. E.g. git switch --detach v0.26.1.
• Use the latest [alpha version of Ratatui] in your app. These are released weekly on Saturdays.
• Compile your code against the main branch either locally by adding e.g. path = "../ratatui" to the dependency, or remotely by adding git = "https://github.com/ratatui/ratatui"

For a list of unreleased breaking changes, see [BREAKING-CHANGES.md].

We don't keep the CHANGELOG updated with unreleased changes, check the git commit history or run git-cliff -u against a cloned version of this repository.

Demo

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

Demo2

This is the demo example from the main README and crate page. Source.

Async GitHub demo

Shows how to fetch data from GitHub API asynchronously. Source.

Calendar explorer demo

Shows how to render a calendar with different styles. Source.

Canvas demo

Shows how to render a canvas with different shapes. Source.

Colors-RGB demo

This example shows the full range of RGB colors in an animation. Source.

Constraint Explorer demo

This interactive example shows how different constraints can be used to layout widgets. Source.

Constraints demo

This example shows different types of constraints. Source.

Custom widget demo

This example shows how to create a custom widget that can be interacted with the mouse. Source.

Hyperlink demo

Shows how to render hyperlinks in a terminal using OSC 8. Source.

Flex demo

This interactive example shows how to use the flex layouts. Source.

Hello World demo

This example shows how to create a simple TUI with a text. Source.

Gauge demo

This example shows different types of gauges. Source.

Inline demo

Shows how to use the inlined viewport to render in a specific area of the screen. Source.

Input form

Shows how to render a form with input fields. Source.

Todo List demo

Shows how to create a simple todo list application. Source.

Modifiers demo

Shows different types of modifiers. Source.

Mouse Drawing demo

Shows how to handle mouse events. Source.

Minimal demo

Shows how to create a minimal application. Source.

Scrollbar demo

Shows how to render different types of scrollbars. Source.

User input demo

Shows how to handle user input. Source.

Weather demo

Shows how to render weather data using barchart widget. Source.

WidgetRef Container demo

Shows how to use WidgetRef to store widgets in a container. Source.