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:
Generate a new project:
And then serve the application on your browser
See templates for more information.
Manual Setup
Add Ratzilla as a dependency in your Cargo.toml:
Here is a minimal example:
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
<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>Ratzillatitle>
<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>
<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.
Add compilation target wasm32-unknown-unknown:
Then serve it on your browser:
Now go to http://localhost:8080 and enjoy TUIs in your browser!
Deploy
To build the WASM bundle, you can run the following command:
Then you can serve the server from the dist directory.
Example Build Script
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
- Minimal (Preview)
- Demo (Preview)
- Pong (Preview)
- Colors RGB (Preview)
- Animations (Preview)
- World Map (Preview)
Websites built with Ratzilla
- https://ratatui.github.io/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://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 Suster (source)
- https://junkdog.github.io/exabind - A tachyonfx tech demo: animated KDE keyboard shortcut viewer
- https://rbn.dev - Personal website of 0x01d (source)
- https://gluesql.org/glues - Glues, a Vim-inspired TUI note-taking app (source)
- https://alertangel.github.io/ - Website for AlertAngel: A device to make monitoring the Elderly a breeze. (source) (WIP)
- https://sdr-geo-db.vercel.app/ - SDR contact logging database (source)
- https://kana.rezoleo.fr - Learn Kana in a terminal fashion (source)
Acknowledgements
Thanks to Webatui projects for the inspiration.
Special thanks to:
- Martin Blasko for his huge help with the initial implementation.
- Adrian Papari for implementing WebGL2 backend.
Lastly, thanks to Ratatui for providing the core UI 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.
no( o _ o no) - respect crables!
Copyright
Copyright (c) 2025, Orhun Parmaksiz