This is a work in progress htmx extension for tauri. Will later distribute properly, but feel free to look around.
To start development run the tauri dev command I reccomend you install the cli via cargo.
Note this repo is using tauri 2.0 beta
cargo install tauri-cli
cargo tauri devThe goal is to make it easy to template and write views on the rust side of the tauri app with no need for wasm and using htmx for the dynamic bits.
To get started load htmx and the extension (main.js for now) then register the extension using hx-ext
<head>
...
<script type="module" src="/main.js" defer></script>
<script type="module" src="/htmx.js" defer></script>
</head>
<body hx-ext="tauri"></body>To invoke a tauri::command use the tauri-invoke attribute
<button tauri-invoke="hello" hx-target="#my-div">Click me</button>
<div id="my-div"></div>#[tauri::command]
fn hello() -> String {
"Hello, world!".to_string()
}This is the same as calling invoke('hello') then it will insert "Hello, world!" into #my-div.
It also works with forms.
<form tauri-invoke="save" hx-swap="outerHTML">
<input type="text" name="name" />
<button type="submit">Save</button>
</form>#[tauri::command]
async fn save(name: &str) -> Result<String, String> {
do_save(name).await;
format!("Saved {name} to contacts")
}This is the same as calling invoke('save', {name}), hx-swap will swap the form for our success message.
You can also listen to events. For example if you have a background task working and wish to update the frontend with a progress.
<div tauri-listen="progress"></div>fn do_stuff(app: AppHandle) {
thread::spawn(move || {
for i in 0..=100 {
app.emit("progress", format!("progress: {i}%")).unwrap();
thread::sleep(Duration::from_millis(100));
}
});
}This uses the event.listen() tauri function and will use htmx to swap the innerHTML of the div. You can still use hx-target.
- emit events from htmx
- emit to specific windows
- finish todo list
When it comes to rust templating shtml is pretty nice, but there are other options.
Also checkout the SHAT STACK a full stack rust/htmx app template using shtml, htmx, axum, and tailwind. (also a wip)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent