DEV Community

Alex Spinov
Alex Spinov

Posted on

Tauri v2 Has a Free API — Build Desktop and Mobile Apps with Web Tech

#rust #webdev #desktop #tutorial

Tauri v2 lets you build desktop AND mobile apps using any web framework — React, Vue, Svelte, Solid. Native performance with a fraction of Electron's memory and bundle size.

Why Tauri v2?

  • 10x smaller than Electron — 2MB vs 200MB bundles
  • Desktop + Mobile — v2 adds iOS and Android support
  • Any frontend — React, Vue, Svelte, Solid, plain HTML
  • Rust backend — type-safe, memory-safe, blazing fast
  • System APIs — file system, notifications, clipboard, tray

Quick Start 

npm create tauri-app@latest myapp
cd myapp
npm install
npm run tauri dev
Enter fullscreen mode Exit fullscreen mode

Frontend → Rust Communication 

// src-tauri/src/lib.rs
#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! Welcome to Tauri v2.", name)
}

#[tauri::command]
async fn read_file(path: String) -> Result<String, String> {
    std::fs::read_to_string(&path)
        .map_err(|e| e.to_string())
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet, read_file])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
Enter fullscreen mode Exit fullscreen mode 
// Frontend (any framework)
import { invoke } from '@tauri-apps/api/core';

const greeting = await invoke('greet', { name: 'Alice' });
console.log(greeting); // "Hello, Alice! Welcome to Tauri v2."

const content = await invoke('read_file', { path: '/tmp/test.txt' });
Enter fullscreen mode Exit fullscreen mode

Plugins (v2 System) 

# File system
cargo tauri add fs

# HTTP client  
cargo tauri add http

# Notifications
cargo tauri add notification

# Shell commands
cargo tauri add shell

# Clipboard
cargo tauri add clipboard-manager
Enter fullscreen mode Exit fullscreen mode 
import { readTextFile, writeTextFile } from '@tauri-apps/plugin-fs';
import { fetch } from '@tauri-apps/plugin-http';
import { sendNotification } from '@tauri-apps/plugin-notification';

// Read/write files
const content = await readTextFile('config.json');
await writeTextFile('output.txt', 'Hello!');

// HTTP (no CORS!)
const response = await fetch('https://api.example.com/data');

// Native notification
await sendNotification({ title: 'Done!', body: 'Task completed.' });
Enter fullscreen mode Exit fullscreen mode

Mobile Support (v2 Exclusive) 

# Add mobile targets
npm run tauri android init
npm run tauri ios init

# Run on device/emulator
npm run tauri android dev
npm run tauri ios dev

# Build
npm run tauri android build
npm run tauri ios build
Enter fullscreen mode Exit fullscreen mode

System Tray 

use tauri::{SystemTray, SystemTrayMenu, SystemTrayMenuItem};

let tray_menu = SystemTrayMenu::new()
    .add_item(CustomMenuItem::new("show", "Show Window"))
    .add_native_item(SystemTrayMenuItem::Separator)
    .add_item(CustomMenuItem::new("quit", "Quit"));

let tray = SystemTray::new().with_menu(tray_menu);
Enter fullscreen mode Exit fullscreen mode

Bundle Sizes

Framework Bundle Size RAM Usage
Tauri v2 ~2-5 MB ~30 MB
Electron ~150-200 MB ~150+ MB
Neutralino ~2-3 MB ~50 MB

Building data tools for desktop? Check out my Apify actors for web scraping APIs, or email spinov001@gmail.com for custom Tauri applications.

Tauri, Electron, or native — what do you build desktop apps with? Comment below!

Top comments (0)