Build terminal-themed web applications with Rust and WebAssembly. Powered by Ratatui.
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.
Add Ratzilla as a dependency in your Cargo.toml:
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 ➡️
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:
Now go to http://localhost:8080 and enjoy TUIs in your browser!
To build the WASM bundle, you can run the following command:
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
There is a Vercel deployment template available for Ratzilla here.
Thanks to Webatui projects for the inspiration.
Special thanks to:
Lastly, thanks to Ratatui for providing the core UI components.
Pull requests are welcome!
Consider submitting your ideas via issues first and check out the existing issues.
Licensed under either of Apache License Version 2.0 or The MIT License at your option.
🦀 ノ( º _ º ノ) - respect crables!
Copyright © 2025, Orhun Parmaksız
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4