Hirola is an un-opinionated webf ramework that is focused on simplicity and predictability.
- Keep it simple. A simple and declarative way to build web UIs in rust with a small learning curve.
- Make it easy to read, extend and share code. Mixins and components are kept simple and macro-free.
- No context, you can choose passing props down, and/or use the
global-state. - Familiality. Uses rsx which is very similar to jsx.
We are going to create a simple counter program.
cargo new counter
With a new project, we need to create an index file which is the entry point and required by trunk
cd counter
Create an index.html in the root of counter. Add the contents below
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hirola Counter</title>
<body></body>
</head>
</html>Lets add some code to src/main.rs
use hirola::prelude::*;
fn counter(app: &HirolaApp) -> Dom {
let count = Signal::new(0);
let increment = count.mut_callback(|c, _| c + 1)
html! {
<div>
<button on:click=increment>"Increment"</button>
<span>{count.get()}</span>
</div>
}
}
fn main() {
let window = web_sys::window().unwrap();
let document = window.document().unwrap();
let body = document.body().unwrap();
let app = HirolaApp::new();
app.mount(&body, counter);
}Now lets run our project
trunk serve
You should be able to get counter running: Live Example
Check out Hirola Docs written with Hirola itself!
Here are some extensions for hirola:
| Status | Goal | Labels |
|---|---|---|
| ✔ | Write code that is declarative and easy to follow | ready |
| ✔ | Allow extensibility via mixins | ready |
| 🚀 | Standardize Components | ready |
| 🚀 | SSR | ready |
| 🚀 | Hydration | todo |
| 🚀 | Serverside integrations | todo |
- Sycamore
- Alpine.js
- React.js
- Yew
This API will certainly change.
Go to examples and use trunk
$ trunk serve
You need need to have rust, cargo and trunk installed.
License: MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent