Events in Tauri allow you to send messages to different parts of your app: from Rust to JavaScript, JavaScript to Rust, window to window, process to process, etc. Today, we'll showcase plenty of ways to dispatch and handle events.
Setting Up the Project
Let's create a new Tauri app with the CLI:
npm create tauri-app@latestWe'll choose a vanilla TypeScript template to get started.
Next, navigate into the project directory and run the following:
npm installcd src-tauricargo add tokio --features timeNow we'll have both JavaScript and Rust dependencies that we need.
Creating a Progress Indicator
A common use case for events is to provide the user feedback on a long process. We'll start by making a command inside of src-tauri/src/lib.rs:
use std::time::Duration;use tauri::{AppHandle, Emitter};use tokio::time::sleep; #[tauri::command]fn start_process(app: AppHandle) { tauri::async_runtime::spawn(async move { for i in 0..=100 { app.emit("progress", i).ok(); sleep(Duration::from_millis(50)).await; } });} #[cfg_attr(mobile, tauri::mobile_entry_point)]pub fn run() { tauri::Builder::default() .plugin(tauri_plugin_shell::init()) .invoke_handler(tauri::generate_handler![start_process]) .run(tauri::generate_context!()) .expect("error while running tauri application");}In the command, we spawn a new thread using the async runtime and simply loop from 0 to 100. On every iteration, we call app.emit() to broadcast the "progress" event with the value i, then we sleep for 50 ms. After registering our command inside invoke_handler(), we can move on to the frontend.
First, we'll add a button and a container for our progress output inside index.html:
<main class="container"> <div> <h2 id="progress-header"></h2> <p id="progress"></p> </div> <button id="start">Start Process</button></main>Now we'll call our command when the button is clicked in main.ts:
import { invoke } from "@tauri-apps/api/core";import { listen } from "@tauri-apps/api/event"; window.addEventListener("DOMContentLoaded", () => { let headerEl = document.querySelector("#progress-header"); let progressEl = document.querySelector("#progress"); let buttonEl: HTMLButtonElement | null = document.querySelector("#start"); if (headerEl && progressEl && buttonEl) { buttonEl.addEventListener("click", async () => { await invoke("start_process"); headerEl.innerHTML = "Processing..."; buttonEl.disabled = true; }); listen("progress", (event) => { progressEl.innerHTML = `${event.payload}%`; if (event.payload === 100) { headerEl.innerHTML = "Done!"; buttonEl.disabled = false; } }); }});Here we register a "click" event listener for the button that invokes the start_process command, updates the header to indicate that it started, and disables the button so we can't start the process again. Then, we register the listener for the "progress" event. We use event.payload to display the percentage done. When the payload is equal to 100, we update the header to say "Done!" and enable the button again.
Adding Pause and Resume Functionality
What if we wanted to pause the process? To solve this, we'll send an event from the frontend to our Rust code to pause and resume the long-running process.
First, let's update our main.ts:
import { invoke } from "@tauri-apps/api/core";import { emit, listen } from "@tauri-apps/api/event"; window.addEventListener("DOMContentLoaded", () => { let headerEl = document.querySelector("#progress-header"); let progressEl = document.querySelector("#progress"); let buttonEl: HTMLButtonElement | null = document.querySelector("#start"); let status: "not_started" | "processing" | "paused" = "not_started"; if (headerEl && progressEl && buttonEl) { buttonEl.addEventListener("click", async () => { headerEl.innerHTML = "Processing..."; if (status === "not_started") { await invoke("start_process"); status = "processing"; buttonEl.innerHTML = "Pause"; } else if (status === "processing") { await emit("pause"); headerEl.innerHTML = "Paused"; status = "paused"; buttonEl.innerHTML = "Resume"; } else { await emit("resume"); status = "processing"; buttonEl.innerHTML = "Pause"; } }); listen("progress", (event) => { progressEl.innerHTML = `${event.payload}%`; if (event.payload === 100) { headerEl.innerHTML = "Done!"; buttonEl.innerHTML = "Start Process"; status = "not_started"; } }); }});We added a status variable that can be "not_started", "processing", or "paused". Instead of disabling the button, clicking will either start, pause, or resume the process, while updating the status. Finally, we reset the status variable to "not_started" in the listener when it's done.
Now let's implement this in lib.rs:
use std::sync::atomic::{AtomicBool, Ordering}; #[tauri::command]fn start_process(app: AppHandle) { tauri::async_runtime::spawn(async move { static IS_PAUSED: AtomicBool = AtomicBool::new(false); app.listen("pause", |_| { IS_PAUSED.store(true, Ordering::Relaxed); }); app.listen("resume", |_| { IS_PAUSED.store(false, Ordering::Relaxed); }); for i in 0..=100 { while IS_PAUSED.load(Ordering::Relaxed) { sleep(Duration::from_millis(10)).await; } app.emit("progress", i).ok(); sleep(Duration::from_millis(50)).await; } });}Here we add an AtomicBool, IS_PAUSED, to track whether the process is paused. We add listeners for "pause" and "resume" events to update the IS_PAUSED. During the loop, if the process is paused, we wait in a small sleep loop until it's resumed. Now we can pause and resume the process seamlessly. If you want to know more about atomics in rust I recommend the Rust Atomics and Locks book.
Window-to-Window Events
We can also communicate from window to window or just to specific windows. To demonstrate, we'll be sending a message from one window to another. To get started, let's first add another window to our Tauri config and allow it to accept events.
First, in tauri.conf.json:
{ "app": { "withGlobalTauri": true, "windows": [ { "title": "events", "width": 800, "height": 600 }, { "title": "window 2", "label": "window_2", "url": "window2.html", "width": 600, "height": 1000 } ], "security": { "csp": null } }}We added a new window with the label "window_2", with a URL set to "window2.html". We'll create this file later. But first, we need to add the new window to the capabilities file, src-tauri/capabilities/default.json:
{ "$schema": "../gen/schemas/desktop-schema.json", "identifier": "default", "description": "Capability for the main window", "windows": ["main", "window_2"], "permissions": [ "core:default", "shell:allow-open" ]}All we need to do is add "window_2" to the "windows" value. If we don't do this, the window won't be able to listen to events—or much of anything.
Now, let's make window2.html in the root of our project:
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <link rel="stylesheet" href="/src/styles.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tauri App</title> <script type="module" src="/src/main.ts" defer></script></head><body> Window 2</body></html>We'll keep the same <head> section from index.html, but we'll remove the body content for now.
Finally, let's add a new button to send the message inside of index.html:
<body> <main class="container"> <div> <h2 id="progress-header"></h2> <p id="progress"></p> </div> <button id="start">Start Process</button> <button id="send-message">Send Message</button> </main></body>Next, we'll fire and listen for the event in main.ts:
// Add emitTo to your importimport { emit, emitTo, listen } from "@tauri-apps/api/event"; listen("message", (event) => { if (typeof event.payload === "string") { document.body.innerHTML = event.payload; }}); let messageButton = document.querySelector("#send-message"); if (messageButton) { messageButton.addEventListener("click", async () => { await emitTo( "window_2", "message", "Your worst sin is that you have destroyed and betrayed yourself for nothing. - Dostoyevsky" ); });}Just like before, we register the listen() handler for the "message" event to replace our body with the message. The button will use emitTo() to send our cheerful message from Dostoyevsky only to "window_2".
But if we run this, both windows will handle the "message" event—which is not what we'd expect to happen using emitTo(). The listen() function listens to all events of the given name, regardless of the specified target.
To fix this behavior, we need to get the current webview and then register our handler on the webview. So let's modify main.ts again:
// Add the import to the top of the fileimport { getCurrentWebview } from "@tauri-apps/api/webview"; let webview = getCurrentWebview(); // New // Call .listen on the webviewwebview.listen("message", (event) => { if (typeof event.payload === "string") { document.body.innerHTML = event.payload; }}); let messageButton = document.querySelector("#send-message"); if (messageButton) { messageButton.addEventListener("click", async () => { await emitTo( "window_2", "message", "Your worst sin is that you have destroyed and betrayed yourself for nothing. - Dostoyevsky" ); });}Now, after calling .listen() on a webview, it will only handle events that target it. (Note that calling emit("message") will still work.)
Those are the basics of sending and listening for events, showcasing how Tauri enables seamless communication between different parts of your application. Whether it’s cross-window interactions or managing processes, Tauri's event system is both powerful and straightforward. With these tools, you can build dynamic apps that deliver seamless user experiences.