Building a Cross-Platform Desktop App with Tauri and Svelte: A Step-by-Step Tutorial

Desktop applications have traditionally been built with heavyweight frameworks like Electron. However, Tauri—a modern, lightweight alternative built on Rust—offers improved performance, smaller bundle sizes, and enhanced security. In this tutorial, we’ll guide you through creating a simple cross-platform desktop application using Tauri for the backend and Svelte for the user interface.

Introduction

Tauri leverages web technologies to build native desktop applications while offloading critical operations to Rust. Paired with Svelte—a fast, compile-time JavaScript framework—you can create modern apps that are both visually appealing and highly performant. This tutorial will walk you through setting up your development environment, creating a Svelte project, integrating Tauri, and building your first desktop app.

Prerequisites

Before diving in, ensure you have the following installed:

• Node.js and npm: For managing JavaScript dependencies.
• Rust and Cargo: Tauri relies on Rust; install it from rustup.rs.
• Tauri CLI: Install via npm.
• Basic knowledge of Svelte: Familiarity with Svelte’s component model and reactivity.

To install the Tauri CLI globally, run:

npm install -g @tauri-apps/cli

Step 1: Setting Up Your Svelte Project

We’ll start by creating a new Svelte project. You can use a template via degit:

npx degit sveltejs/template tauri-svelte-app
cd tauri-svelte-app
npm install

This command creates a fresh Svelte application in the tauri-svelte-app directory and installs all required dependencies.

Step 2: Integrating Tauri into Your Project

Inside your Svelte project, initialize Tauri by running:

npx tauri init

This command creates a src-tauri directory with configuration files and Rust source code. During initialization, Tauri will prompt you for details such as the app name and window settings. Accept the defaults or customize them as needed.

Step 3: Configuring Tauri

Open the src-tauri/tauri.conf.json file to adjust settings like the application window, bundle identifiers, and security policies. For example, you might configure the window title and size:

{
  "package": {
    "productName": "TauriSvelteApp",
    "version": "0.1.0"
  },
  "tauri": {
    "windows": [
      {
        "title": "My Tauri App",
        "width": 800,
        "height": 600,
        "resizable": true
      }
    ],
    "security": {
      "csp": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
    }
  }
}

Customize these options to fit your project’s needs.

Step 4: Developing Your Svelte Frontend

Edit your Svelte components in the src folder. Open src/App.svelte and modify it to add your custom UI. For example:

<script>
  let count = 0;
  const increment = () => count += 1;
</script>

<main>
  <h1>Welcome to Tauri + Svelte Desktop App</h1>
  <p>Current count: {count}</p>
  <button on:click={increment}>Increment</button>
</main>

<style>
  main {
    text-align: center;
    padding: 2rem;
    font-family: Arial, sans-serif;
  }
  button {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
  }
</style>

This simple component displays a title, a count, and a button to update the count.

Step 5: Running and Building the Application

Development Mode

To run your app in development mode, use:

npm run dev

In a separate terminal window, start Tauri’s development server:

npx tauri dev

This command opens your Svelte app inside a native window powered by Tauri. Changes you make to your Svelte code will update in real time.

Production Build

Once you’re ready to distribute your app, build it using:

npm run build
npx tauri build

Tauri packages your Svelte frontend along with the Rust backend into a lightweight, platform-specific binary.

Step 6: Extending Functionality with Tauri APIs

Tauri provides many built-in APIs to interact with the system (e.g., file system, notifications, dialogs). To call a Tauri API from Svelte, use the Tauri JavaScript API. For example, to display a notification:

1. First, install the Tauri API package if not already present:

   npm install @tauri-apps/api

1. In your Svelte component, import and call the notification API:

   <script>
     import { notify } from '@tauri-apps/api/notification';

     const sendNotification = async () => {
       await notify('Hello from Tauri!');
     }
   </script>

   <button on:click={sendNotification}>Notify Me</button>

This integration demonstrates how to extend your application’s functionality by leveraging native system features.

Conclusion

By following this tutorial, you’ve built your first cross-platform desktop application using Tauri and Svelte. You learned how to set up a Svelte project, integrate Tauri, configure essential settings, and extend your app with Tauri’s native APIs. Tauri’s lightweight approach combined with Svelte’s reactive simplicity makes for a powerful combination that can significantly improve performance and reduce application size compared to traditional Electron-based solutions.

Experiment further by adding more Tauri API calls or refining your Svelte components. Happy coding!