Skip to content

Contributing to Ratatui Website is built with Astro and Starlight.

The source is available from the ratatui-org/ratatui-website GitHub repository.

If you would like to contribute, you can make a fork and clone the repository. Make sure you run the following git lfs commands before making a PR.

install git lfs
git lfs install
git lfs pull

To build and run the site locally:

install necessary packages
npm install
run site
npm run dev

Feel free to make contributions and submit a PR if you’d like to improve the documentation.

Some Guidelines

  • Prefer links from the root rather than using multiple levels of parent links. (e.g. /concepts/backends/comparison/ instead of ../../backends/comparison/).
  • Prefer to add the last slash on links

Astro and Starlight features

Starlight supports the full range of Markdown syntax in .md files as well as meta information for titles and descriptions in YAML frontmatter.

See starlight for more information on how to author content in markdown.

Custom components

The website uses custom components and features to make it easier to generate high quality documentation that is more maintainable.


Use the LinkBadge component:

import LinkBadge from "/src/components/LinkBadge.astro";
<LinkBadge text="default" href="" variant="default" />
<LinkBadge text="outline" href="" variant="outline" />
<LinkBadge text="note" href="" variant="note" />
<LinkBadge text="danger" href="" variant="danger" />
<LinkBadge text="success" href="" variant="success" />
<LinkBadge text="caution" href="" variant="caution" />
<LinkBadge text="tip" href="" variant="tip" />

This renders as:

default outline note danger success caution tip

Code include

Use the remark-include-code plugin to include code from a test file:

{{#include @code/hello-world-tutorial/src/}}

This renders as:

use crossterm::{
event::{self, KeyCode, KeyEventKind},
terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
use ratatui::{
prelude::{CrosstermBackend, Stylize, Terminal},
use std::io::{stdout, Result};


Draw diagrams with svgbob:

|Get Key Event|
|Update State|
| Render |

This renders as:

Get Key Event Update State Render


Draw diagrams with mermaidjs:

participant User
participant TUI Application
User->>TUI Application: Input/Event/Message
TUI Application->>TUI Application: Update (based on Model and Message)
TUI Application->>TUI Application: Render View (from Model)
TUI Application-->>User: Display UI

This renders as:

TUI ApplicationUserTUI ApplicationUserInput/Event/MessageUpdate (based on Model and Message)Render View (from Model)Display UI