- Notifications
You must be signed in to change notification settings - Fork43
Build terminal-themed web applications with Rust and WebAssembly. Powered by Ratatui.
License
Apache-2.0, MIT licenses found
Licenses found
orhun/ratzilla
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Watch the conference talk:Bringing Terminal Aesthetics to the Web With Rust (and Vice Versa)
Build terminal-themed web applications with Rust and WebAssembly. Powered byRatatui.
Installcargo-generate:
cargo install cargo-generate
Generate a new project:
cargo generate orhun/ratzilla
And thenserve the application on your browser ➡️
Seetemplates for more information.
AddRatzilla as a dependency in yourCargo.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};fnmain() -> 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(' '){letmut 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 yourindex.html. During build,trunk will automatically inject and initialize your Rust code (compiled toWebAssembly) as a JavaScript module.
index.html
<!doctype html><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0, user-scalable=no"/><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/fira_code.min.css"/><linkdata-trunkrel="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 --><scripttype="module">window.addEventListener("TrunkApplicationStarted",(_)=>{// #[wasm_bindgen] functions are now bound to window.wasmBindings.*console.log("application initialized");});</script></body></html>
And thenserve the application on your browser ➡️
Installtrunk to build and serve the web application.
cargo install --locked trunk
Add compilation targetwasm32-unknown-unknown:
rustup target add wasm32-unknown-unknown
Then serve it on your browser:
trunk serve
Now go tohttp://localhost:8080 and enjoy TUIs in your browser!
To build the WASM bundle, you can run the following command:
trunk build --release
Then you can serve the server from thedist directory.
Example Build Script
#!/bin/bashset -euo pipefailexport HOME=/root# Install Rustupcurl --proto'=https' --tlsv1.2 -sSf https://sh.rustup.rs| sh -s -- -y -t wasm32-unknown-unknown --profile minimalsource"$HOME/.cargo/env"# Install trunk using binstallcurl -L --proto'=https' --tlsv1.2 -sSf https://raw.githubusercontent.com/cargo-bins/cargo-binstall/main/install-from-binstall-release.sh| bashcargo binstall --targets x86_64-unknown-linux-musl -y trunk# Build project with trunktrunk build --release
There is a Vercel deployment template available for Ratzillahere.
- 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://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 Şuşter (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)
Thanks toWebatui 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 toRatatui for providing the core UI components.
Pull requests are welcome!
Consider submitting your ideas viaissues first and check out theexisting issues.
Licensed under either ofApache License Version 2.0 orThe MIT License at your option.
🦀 ノ( º _ º ノ) - respect crables!
Copyright © 2025,Orhun Parmaksız
About
Build terminal-themed web applications with Rust and WebAssembly. Powered by Ratatui.
Topics
Resources
License
Apache-2.0, MIT licenses found
Licenses found
Uh oh!
There was an error while loading.Please reload this page.