Build terminal-themed web applications with Rust and WebAssembly. Powered by Ratatui.
Add Ratzilla as a dependency in your Cargo.toml:
cargo add ratzillaHere 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(())
}Then add your index.html which imports the 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"
/>
<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>
<script type="module">
import init from "./pkg/ratzilla.js";
init();
</script>
</body>
</html>Install trunk to build and serve the web application.
cargo install --locked trunkThen serve it on your browser:
trunk serveNow go to http://localhost:8080 and enjoy TUIs in your browser!
- Minimal (Preview)
- Demo (Preview)
- Pong (Preview)
- Colors RGB (Preview)
- Animations (Preview)
- World Map (Preview)
- https://orhun.dev/ratzilla - The official website of Ratzilla
- https://terminalcollective.org - Terminal Collective community website
- https://map.apt-swarm.orca.toys - Map of apt-swarm p2p locations
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.
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
