tauri-expert

name

tauri-expert

description

Expert skill for Tauri v2 development covering Rust backend, IPC (inter-process communication), and capabilities/permissions system. Use whenever the user is building a Tauri desktop or mobile app, working with Tauri commands, configuring capabilities, or bridging frontend and Rust backend. Trigger on mentions of Tauri, tauri.conf.json, Tauri commands, invoke(), Tauri capabilities, or building cross-platform desktop apps with web frontend + Rust backend.

Tauri v2 Expert

Cross-platform desktop/mobile apps with Rust backend and web frontend.

---

Project Setup

# Create new Tauri app
npm create tauri-app@latest

# Add to existing frontend project
npm install -D @tauri-apps/cli
npx tauri init

# Dev
npm run tauri dev

# Build
npm run tauri build

Project Structure

my-app/
├── src/                    # Frontend (React/Vue/Svelte/vanilla)
├── src-tauri/
│   ├── src/
│   │   ├── main.rs
│   │   └── lib.rs          # Commands defined here
│   ├── capabilities/
│   │   └── default.json    # Permission grants
│   ├── Cargo.toml
│   └── tauri.conf.json     # App config
└── package.json

---

Tauri Commands (IPC)

Define a Command (Rust)

// src-tauri/src/lib.rs
use tauri::State;
use std::sync::Mutex;

#[derive(Default)]
struct AppState {
    counter: Mutex<i32>,
}

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {name}! You've been greeted from Rust.")
}

#[tauri::command]
async fn fetch_data(url: String) -> Result<String, String> {
    reqwest::get(&url)
        .await
        .map_err(|e| e.to_string())?
        .text()
        .await
        .map_err(|e| e.to_string())
}

#[tauri::command]
fn increment_counter(state: State<AppState>) -> i32 {
    let mut counter = state.counter.lock().unwrap();
    *counter += 1;
    *counter
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .manage(AppState::default())
        .plugin(tauri_plugin_shell::init())
        .invoke_handler(tauri::generate_handler![
            greet,
            fetch_data,
            increment_counter
        ])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Call from Frontend (TypeScript)

import { invoke } from "@tauri-apps/api/core"

// Simple command
const greeting = await invoke<string>("greet", { name: "World" })

// Async command with error handling
try {
  const data = await invoke<string>("fetch_data", { url: "https://api.example.com" })
} catch (error) {
  console.error("Command failed:", error)
}

// State-managed command
const count = await invoke<number>("increment_counter")

Typed Command Wrapper (Recommended Pattern)

// lib/tauri-commands.ts — single source of truth for all commands
import { invoke } from "@tauri-apps/api/core"

export const commands = {
  greet: (name: string) => invoke<string>("greet", { name }),
  fetchData: (url: string) => invoke<string>("fetch_data", { url }),
  incrementCounter: () => invoke<number>("increment_counter"),
} as const

// Usage — fully typed
const result = await commands.greet("Alice")

---

Events (Backend → Frontend Push)

Emit from Rust

use tauri::{Emitter, AppHandle};

#[tauri::command]
async fn long_running_task(app: AppHandle) -> Result<(), String> {
    for i in 0..100 {
        // Do work...
        app.emit("progress", i).map_err(|e| e.to_string())?;
        tokio::time::sleep(std::time::Duration::from_millis(50)).await;
    }
    app.emit("task-complete", ()).map_err(|e| e.to_string())?;
    Ok(())
}

Listen in Frontend

import { listen } from "@tauri-apps/api/event"

const unlisten = await listen<number>("progress", (event) => {
  console.log("Progress:", event.payload)
  setProgress(event.payload)
})

// Clean up when component unmounts
useEffect(() => {
  return () => { unlisten() }
}, [])

---

Capabilities & Permissions (Security Model)

Tauri v2 uses an explicit capability system — nothing is allowed by default.

capabilities/default.json

{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "description": "Default capabilities for the main window",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "shell:allow-open",
    "fs:allow-read-text-file",
    "fs:allow-write-text-file",
    {
      "identifier": "fs:scope",
      "allow": [{ "path": "$APPDATA/*" }]
    },
    "http:default",
    {
      "identifier": "http:default",
      "allow": [{ "url": "https://api.example.com/*" }]
    }
  ]
}

Custom Permissions (for your own commands)

# src-tauri/permissions/my-permissions.toml
[[permission]]
identifier = "allow-greet"
description = "Allows calling the greet command"
commands.allow = ["greet"]

// Add to capabilities/default.json
{
  "permissions": ["my-plugin:allow-greet"]
}

Principle of Least Privilege

// ❌ Overly broad
{ "permissions": ["fs:default"] }  // grants all filesystem access

// ✅ Scoped to exactly what's needed
{
  "permissions": [
    {
      "identifier": "fs:allow-read-text-file",
      "allow": [{ "path": "$APPDATA/config.json" }]
    }
  ]
}

---

State Management

// Shared, mutable state across commands
use std::sync::Mutex;
use tauri::State;

struct Database {
    conn: Mutex<rusqlite::Connection>,
}

#[tauri::command]
fn get_user(id: i64, db: State<Database>) -> Result<User, String> {
    let conn = db.conn.lock().map_err(|e| e.to_string())?;
    conn.query_row(
        "SELECT id, name FROM users WHERE id = ?1",
        [id],
        |row| Ok(User { id: row.get(0)?, name: row.get(1)? }),
    )
    .map_err(|e| e.to_string())
}

pub fn run() {
    let conn = rusqlite::Connection::open("app.db").expect("failed to open db");

    tauri::Builder::default()
        .manage(Database { conn: Mutex::new(conn) })
        .invoke_handler(tauri::generate_handler![get_user])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

---

Window Management

use tauri::{WebviewWindowBuilder, WebviewUrl};

#[tauri::command]
async fn open_settings_window(app: tauri::AppHandle) -> Result<(), String> {
    WebviewWindowBuilder::new(&app, "settings", WebviewUrl::App("settings.html".into()))
        .title("Settings")
        .inner_size(600.0, 400.0)
        .resizable(false)
        .build()
        .map_err(|e| e.to_string())?;
    Ok(())
}

import { getCurrentWindow } from "@tauri-apps/api/window"

const win = getCurrentWindow()
await win.setTitle("New Title")
await win.minimize()
await win.close()

---

Mobile (iOS/Android)

# Initialize mobile targets
npx tauri ios init
npx tauri android init

# Dev
npx tauri ios dev
npx tauri android dev

# Build
npx tauri ios build
npx tauri android build

// Mobile-specific entry point required
#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        // ...
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

// tauri.conf.json — mobile-specific config
{
  "bundle": {
    "iOS": {
      "minimumSystemVersion": "13.0"
    },
    "android": {
      "minSdkVersion": 24
    }
  }
}

---

Build Configuration

// tauri.conf.json
{
  "productName": "MyApp",
  "version": "1.0.0",
  "identifier": "com.example.myapp",
  "app": {
    "windows": [
      {
        "title": "MyApp",
        "width": 1024,
        "height": 768,
        "resizable": true
      }
    ],
    "security": {
      "csp": "default-src 'self'; img-src 'self' data: https:; connect-src 'self' https://api.example.com"
    }
  },
  "bundle": {
    "active": true,
    "targets": ["dmg", "msi", "deb", "appimage"],
    "icon": ["icons/32x32.png", "icons/128x128.png", "icons/icon.icns", "icons/icon.ico"]
  }
}

---

Key Rules

1. Capabilities are explicit and scoped — never grant *:default broadly; scope to specific paths/URLs
2. All commands return Result<T, String> for fallible operations — never panic across the IPC boundary
3. Use State<T> for shared backend state — wrap mutable state in Mutex/RwLock
4. Typed command wrapper on frontend — single source of truth for all invoke() calls
5. CSP configured in tauri.conf.json — restrict connect-src to known API domains
6. Events for backend→frontend push, commands for frontend→backend calls
7. #[cfg_attr(mobile, tauri::mobile_entry_point)] required if targeting iOS/Android
8. Clean up event listeners — call unlisten() on component unmount
9. Never trust frontend input in commands — validate in Rust just like a backend API
10. Use tauri-plugin-store or SQLite for persistence — not browser localStorage (unreliable in WebView)