Contributing to Ratatui Website

ratatui.rs is built with Astro and Starlight.

The source is available from the ratatui/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

mise run pnpm-install

run site

mise run dev

mise run pnpm-install installs the website’s JavaScript dependencies. mise run dev starts the local Astro/Starlight development server and prints a local URL you can open in your browser.

If you are not using mise, use Node 24 and run the JavaScript package manager directly:

install necessary packages

corepack enable
pnpm install

run site

pnpm dev

corepack enable makes the pnpm command available. The exact pnpm version is pinned in package.json, so you do not need to install pnpm globally.

To check the site before opening a PR:

build site

mise run build

run tests

mise run test

For Cloudflare Pages, use pnpm build as the build command and dist as the output directory.

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.

LinkBadge

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:

```rust
{{#include @code/tutorials/hello-ratatui/src/main.rs}}
```

This renders as:

use ratatui::{DefaultTerminal, Frame};

fn main() -> color_eyre::Result<()> {
    color_eyre::install()?;
    ratatui::run(app)?;
    Ok(())
}

fn app(terminal: &mut DefaultTerminal) -> std::io::Result<()> {
    loop {
        terminal.draw(render)?;
        if crossterm::event::read()?.is_key_press() {
            break Ok(());
        }
    }
}

fn render(frame: &mut Frame) {
    frame.render_widget("hello world", frame.area());
}

svgbob

Draw diagrams with svgbob:

```svgbob
 ,-------------.
 |Get Key Event|
 `-----+-------'
       |
       |
 ,-----v------.
 |Update State|
 `-----+------'
       |
       |
   ,---v----.
   | Render |
   `--------'
```

This renders as:

mermaidjs

Draw diagrams with mermaidjs:

```mermaid
sequenceDiagram
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: