Tauri - Build Desktop Apps with Web Technologies

Tauri is a framework for building tiny, fast binaries for all major desktop platforms using a web frontend.

GitHub

https://github.com/tauri-apps/tauri

What is Tauri?

Tauri allows you to:

Build desktop apps with web technologies

Use any frontend framework (React, Vue, Svelte, etc.)

Create tiny bundles (under 3MB)

Target Windows, macOS, and Linux

Access system APIs securely

Key Features

1. Tiny Bundle Size

Under 3MB with minimal dependencies

60% smaller than Electron apps

Fast download and installation

2. Web Technologies

Use your favorite frontend framework

Leverage existing web skills

No need to learn native languages

3. Secure by Design

No Node.js runtime (smaller attack surface)

Granular API permissions

Sandboxed backend

4. Performance

Native performance

Low memory usage

Fast startup time

Installation

ash

Install Tauri CLI

cargo install tauri-cli

Or use npm

npm install -g @tauri-apps/cli

Create new project

npm create tauri-app@latest

Or add to existing project

cd your-web-app
npm install -D @tauri-apps/cli
npm run tauri init

Quick Start

1. Create Project

ash
npm create tauri-app@latest my-app
cd my-app
npm install
npm run tauri dev


2. Project Structure


my-app/
鈹溾攢鈹€ src-tauri/ # Tauri backend
鈹? 鈹溾攢鈹€ src/ # Rust code
鈹? 鈹溾攢鈹€ tauri.conf.json # Configuration
鈹? 鈹斺攢鈹€ icons/ # App icons
鈹溾攢鈹€ src/ # Frontend code
鈹溾攢鈹€ index.html
鈹斺攢鈹€ package.json


Frontend Integration

React Example

ypescript
import { invoke } from '@tauri-apps/api/tauri'

function App() {
const [greeting, setGreeting] = useState('')

async function greet() {
// Call Rust function from JavaScript
const result = await invoke('greet', { name: 'World' })
setGreeting(result)
}

return (

Greet

{greeting}

)
}

Vue Example

ue





Backend (Rust) Code

Command Registration

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

fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}


System APIs

File System

ypescript
import { open, save } from '@tauri-apps/api/dialog'
import { readTextFile, writeTextFile } from '@tauri-apps/api/fs'

// Open file dialog
const selected = await open({
multiple: false,
filters: [{
name: 'Text',
extensions: ['txt', 'md']
}]
})

// Read file
const content = await readTextFile(selected)

// Write file
await writeTextFile('output.txt', 'Hello Tauri!')


Window Management

ypescript
import { appWindow } from '@tauri-apps/api/window'

// Minimize window
await appWindow.minimize()

// Maximize window
await appWindow.maximize()

// Close window
await appWindow.close()

// Toggle fullscreen
await appWindow.setFullscreen(true)


Notifications

ypescript
import { sendNotification } from '@tauri-apps/api/notification'

await sendNotification({
title: 'Hello',
body: 'Notification from Tauri'
})


Comparison

| Feature | Tauri | Electron |
|---------|-------|----------|
| Bundle Size | ~3MB | ~100MB+ |
| Memory Usage | Low | High |
| Languages | Rust + JS | Node.js + JS |
| Security | High | Medium |
| Performance | Native | Good |
| Startup Time | Fast | Slower |

Real-World Examples

File Explorer

ypescript
import { open } from '@tauri-apps/api/dialog'
import { readDir } from '@tauri-apps/api/fs'

async function selectFolder() {
const dir = await open({ directory: true })
const entries = await readDir(dir)
return entries
}


System Tray

ypescript
import { TrayIcon, MenuItem } from '@tauri-apps/api/tray'

await TrayIcon.new({
icon: 'icon.png',
menu: [
{
id: 'quit',
label: 'Quit'
}
]
})


Build & Distribute

Development

ash
npm run tauri dev


Production Build

ash
npm run tauri build


This creates:

Windows: .exe installer

macOS: .dmg installer

Linux: .deb, .AppImage

Configuration

json
{
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build",
"devPath": "http://localhost:3000",
"distDir": "../dist"
},
"package": {
"productName": "My App",
"version": "1.0.0"
},
"tauri": {
"allowlist": {
"all": true
}
}
}


Why Tauri?

Small Size: Perfect for distribution

Performance: Native-like performance

Security: Better than Electron

Flexibility: Any frontend framework

Community: Growing and active

Documentation: Excellent docs and examples

Use Cases

Desktop utilities

Productivity apps

Developer tools

File managers

System monitors

Games (simple)

Dashboard apps

Learning Resources

Official Docs: https://tauri.app/

Examples: https://github.com/tauri-apps/tauri/tree/dev/examples

Plugins: https://github.com/tauri-apps/plugins-workspace

Discord: https://discord.com/invite/tauri

Summary

Tauri is the future of desktop app development. It combines the best of web technologies with native performance, all while keeping bundle sizes tiny. If you're building a desktop app, Tauri should be your first choice.

---

Rating: 猸愨瓙猸愨瓙猸?
Best for: Desktop apps, developer tools, utilities
Learning curve: 猸愨瓙猸?(Rust knowledge helpful)