To use the examples clone the repo, cd into the example, you'll have to create a hard link to the htmx.js and tauri-ext.js files.
cd examples/hello
ln ../htmx.js src/
ln ../../src/tauri-ext.js src/
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 copy htmx and the tauri-ext.js files into your src folder, then load htmx and the extension, then register the extension using hx-ext
<head>
...
<script type="module" src="/tauri-ext.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.
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)