ratatui/ratzilla

ratatui/ratzilla has 1,478 GitHub stars and 69 forks. GitHot measured 0 stars in 24 hours and +2 in 7 days. Last checked 2026-11-05 01:09 UTC. Last push 2026-10-23.

How these counts are measured

Build terminal-themed web applications with Rust and WebAssembly. Powered by Ratatui.

1,478 stars 69 forks

Measured star growth

in 24h: 0
in 7 days: +2
in 15 days: Update delayed
in 1 month: Update delayed

Net star changes over overlapping periods, not daily totals. Missing measurements are left blank. Stars measure attention, not software quality.

README.md

Original

Watch the conference talk: Bringing Terminal Aesthetics to the Web With Rust (and Vice Versa)

Ratzilla

Build terminal-themed web applications with Rust and WebAssembly. Powered by Ratatui.

Quickstart

Templates

Install cargo-generate:

cargo install cargo-generate

Generate a new project:

cargo generate ratatui/ratzilla

And then serve the application on your browser ➡️

See templates for more information.

Manual Setup

Add Ratzilla as a dependency in your Cargo.toml:

cargo add ratzilla

Here is a minimal example:

use std::{cell::RefCell, io, rc::Rc};

use ratzilla::ratatui::{
    layout::Alignment,
    style::Color,
    widgets::{Block, Paragraph},
    Terminal,
};

use ratzilla::{event::KeyCode, DomBackend, WebRenderer};

fn main() -> io::Result<()> {
    let counter = Rc::new(RefCell::new(0));
    let backend = DomBackend::new()?;
    let mut terminal = Terminal::new(backend)?;

    terminal.on_key_event({
        let counter_cloned = counter.clone();
        move |key_event| {
            if key_event.code == KeyCode::Char(' ') {
                let mut counter = counter_cloned.borrow_mut();
                *counter += 1;
            }
        }
    })?;

    terminal.draw_web(move |f| {
        let counter = counter.borrow();
        f.render_widget(
            Paragraph::new(format!("Count: {counter}"))
                .alignment(Alignment::Center)
                .block(
                    Block::bordered()
                        .title("Ratzilla")
                        .title_alignment(Alignment::Center)
                        .border_style(Color::Yellow),
                ),
            f.area(),
        );
    });

    Ok(())
}

Add your index.html. During build, trunk will automatically inject and initialize your Rust code (compiled to WebAssembly) as a JavaScript module.

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/fira_code.min.css"
    />
    <link data-trunk rel="rust"/>
    <title>Ratzilla</title>
    <style>
      body {
        margin: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        background-color: #121212;
      }
      pre {
        font-family: "Fira Code", monospace;
        font-size: 16px;
        margin: 0px;
      }
    </style>
  </head>
  <body>
    <!-- (optional) subscribe to the application started event -->
    <script type="module">
      window.addEventListener("TrunkApplicationStarted", (_) => {
        // #[wasm_bindgen] functions are now bound to window.wasmBindings.*
        console.log("application initialized");
      });
    </script>
  </body>
</html>

And then serve the application on your browser ➡️

Serve

Install trunk to build and serve the web application.

cargo install --locked trunk

Add compilation target wasm32-unknown-unknown:

rustup target add wasm32-unknown-unknown

Then serve it on your browser:

trunk serve

Now go to http://localhost:8080 and enjoy TUIs in your browser!

Deploy

To build the WASM bundle, you can run the following command:

trunk build --release

Then you can serve the server from the dist directory.

Example Build Script

#!/bin/bash
set -euo pipefail
export HOME=/root

# Install Rustup
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y -t wasm32-unknown-unknown --profile minimal
source "$HOME/.cargo/env"

# Install trunk using binstall
curl -L --proto '=https' --tlsv1.2 -sSf https://raw.githubusercontent.com/cargo-bins/cargo-binstall/main/install-from-binstall-release.sh | bash
cargo binstall --targets x86_64-unknown-linux-musl -y trunk

# Build project with trunk
trunk build --release