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 orhun/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 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.

<!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.

#!/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

Vercel

There is a Vercel deployment template available for Ratzilla here.

Documentation

Examples

Websites built with Ratzilla

https://orhun.dev/ratzilla - The official website of Ratzilla
https://terminalcollective.org - Terminal Collective community website
https://www.function-type.com/tusistor - Resistor calculator
http://timbeck.me - Personal website of Tim Beck
https://jetpham.com - Conway's Game of Life
https://map.apt-swarm.orca.toys - Map of apt-swarm p2p locations
TachyonFX FTL - DSL editor and previewer for TachyonFX effects
https://emrecansuster.com - Personal website of Emrecan Şuşter (source)

Acknowledgements

Thanks to Webatui projects for the inspiration and the initial implementation of the essential parts of DOM backend.

Special thanks to Martin Blasko for his huge help and contributions.

Lastly, thanks to Ratatui for providing the core TUI components.

Contributing

Pull requests are welcome!

Consider submitting your ideas via issues first and check out the existing issues.

License

Licensed under either of Apache License Version 2.0 or The MIT License at your option.

🦀 ノ( º _ º ノ) - respect crables!

ratzilla 0.1.0