1 unstable release

new 0.1.0	Jan 25, 2025

#7 in #htmx

77 downloads per month

MIT license

16KB
239 lines

Tauri Axum HTMX

Build interactive UIs in Tauri applications using HTMX and Axum, enabling server-side rendering patterns by running the Axum app in the Tauri backend.

Quick Overview

Enables server-side rendering patterns by:

Intercepting HTMX requests in the webview
Forwarding them through Tauri's FFI bridge
Processing them with an Axum application running in the Tauri backend
Returning HTML responses back to the webview be rendered by HTMX

Demo and example source:

https://github.com/user-attachments/assets/02923cc7-281c-4271-9f52-02ecee1ac588

Getting started

Create a vanilla Tauri project and initialize tauri-axum-htmx in src/index.html

<!doctype html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/htmx.org@2.0.4"></script>
    <script type="module">
      import { initialize } from "https://unpkg.com/tauri-axum-htmx";

      initialize("/"); // the initial path for the application to start on
    </script
  </head>
</html>

Create a Tauri command to process requests from the webview

struct TauriState {
    router: Arc<Mutex<Router>>,
}

#[tauri::command]
async fn local_app_request(
    state: State<'_, TauriState>,
    local_request: LocalRequest,
) -> Result<LocalResponse, ()> {
    let mut router = state.router.lock().await;

    let response = local_request.send_to_router(&mut router).await;

    Ok(response)
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    let app = Router::new().route("/", get(|| async { "Hello, World!" }));

    let tauri_stat = TauriState {
        router: Arc::new(Mutex::new(router)),
    };

    tauri::Builder::default()
        .plugin(tauri_plugin_shell::init())
        .manage(tauri_stat)
        .invoke_handler(tauri::generate_handler![local_app_request])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

JavaScript API

initialize(initialPath: string, localAppRequestCommandOverride: string)

initialPath: The initial path for the application to start on
localAppRequestCommandOverride: The name of the Tauri command to process requests from the webview

Dependencies

~5–12MB
~125K SLoC