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

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.

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-world/src/main.rs:imports}}
```

This renders as:

use std::io;

use ratatui::{
    crossterm::event::{self, KeyCode, KeyEventKind},
    style::Stylize,
    widgets::Paragraph,
    DefaultTerminal,
};

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: