Send Desktop Notifications with Tauri | React + Rust Tutorial

Send Desktop Notifications with Tauri | React + Rust Tutorial

This tutorial demonstrates how to add native desktop notifications to a Tauri application using React, TypeScript, and Rust. You'll learn to set up a Tauri React project, install the notification plugin, configure the Rust backend, and create a React frontend button that triggers system notifications.

Code

// Rust backend (src-tauri/src/main.rs)
fn main() {
  tauri::Builder::default()
    // Initialize the notification plugin
    .plugin(tauri_plugin_notification::init())
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

// React frontend (src/App.tsx)
import React from 'react';
import { sendNotification } from '@tauri-apps/plugin-notification';

function App() {
  // Async function to send a desktop notification
  async function notify() {
    await sendNotification({
      title: 'Hello!',
      body: 'Notification from Tauri',
    });
  }

  return (
    

      Send Notification
    
  );
}

export default App;

Key Points

• Install the notification plugin on both Rust (cargo) and frontend (npm) sides to enable notifications.
• Register tauri_plugin_notification::init() in the Rust backend builder to activate the plugin.
• Use sendNotification from @tauri-apps/plugin-notification in React to trigger native desktop notifications.
• Notifications work seamlessly across platforms, but macOS requires release builds for best results.
• Tauri 2.0 integrates React and Rust smoothly, making desktop app notifications straightforward to implement.