Learn TAURI with Real Code Examples

Updated Nov 23, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Tauri Simple Todo App

// main.js (frontend)
document.getElementById('addBtn').addEventListener('click', () => {
    const input = document.getElementById('todoInput');
    const todo = input.value.trim();
    if(todo) {
        const list = document.getElementById('todoList');
        const li = document.createElement('li');
        li.textContent = todo;
        list.appendChild(li);
        input.value = '';
    }
});

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Todo App</h1>
        <input type='text' id='todoInput' placeholder='New Todo'>
        <button id='addBtn'>Add</button>
        <ul id='todoList'></ul>
        <script src='main.js'></script>
    </body>
</html>

Demonstrates a simple Tauri app with a Todo list using a web frontend (HTML/JS) and Tauri APIs for desktop integration.

Let’s Try →

Tauri File Reader App

// main.js
import { readTextFile } from '@tauri-apps/api/fs';

document.getElementById('readBtn').addEventListener('click', async () => {
    const filePath = document.getElementById('fileInput').value;
    try {
        const contents = await readTextFile(filePath);
        document.getElementById('output').textContent = contents;
    } catch (e) {
        alert('Failed to read file: ' + e);
    }
});

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h2>File Reader</h2>
        <input id='fileInput' placeholder='Path to file'>
        <button id='readBtn'>Read</button>
        <pre id='output'></pre>
        <script type='module' src='main.js'></script>
    </body>
</html>

Demonstrates a Tauri app that reads a file using the Tauri FS API and displays its content in the UI.

Let’s Try →

Tauri Clipboard Manager

// main.js
import { writeText, readText } from '@tauri-apps/api/clipboard';

document.getElementById('copyBtn').addEventListener('click', async () => {
    await writeText(document.getElementById('inputText').value);
    alert('Copied to clipboard!');
});

document.getElementById('pasteBtn').addEventListener('click', async () => {
    const text = await readText();
    document.getElementById('output').textContent = text;
});

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h2>Clipboard Manager</h2>
        <input id='inputText' placeholder='Text to copy'>
        <button id='copyBtn'>Copy</button>
        <button id='pasteBtn'>Paste</button>
        <p id='output'></p>
        <script type='module' src='main.js'></script>
    </body>
</html>

Demonstrates clipboard read/write using the Tauri Clipboard API.

Let’s Try →

Tauri Notification Example

// main.js
import { isPermissionGranted, requestPermission, sendNotification } from '@tauri-apps/api/notification';

document.getElementById('notifyBtn').addEventListener('click', async () => {
    let permissionGranted = await isPermissionGranted();
    if (!permissionGranted) {
        const permission = await requestPermission();
        permissionGranted = permission === 'granted';
    }
    if (permissionGranted) {
        sendNotification({ title: 'Tauri App', body: 'This is a desktop notification!' });
    }
});

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h2>Tauri Notification</h2>
        <button id='notifyBtn'>Send Notification</button>
        <script type='module' src='main.js'></script>
    </body>
</html>

Shows how to send native desktop notifications using the Tauri Notification API.

Let’s Try →

Tauri System Info App

// main.js
import { platform, version, arch } from '@tauri-apps/api/os';

document.addEventListener('DOMContentLoaded', async () => {
    document.getElementById('os').textContent = await platform();
    document.getElementById('arch').textContent = await arch();
    document.getElementById('ver').textContent = await version();
});

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h2>System Info</h2>
        <p>OS: <span id='os'></span></p>
        <p>Arch: <span id='arch'></span></p>
        <p>Version: <span id='ver'></span></p>
        <script type='module' src='main.js'></script>
    </body>
</html>

Displays system information like OS, architecture, and version using the Tauri OS API.

Let’s Try →

Tauri File Saver App

// main.js
import { writeFile } from '@tauri-apps/api/fs';
import { save } from '@tauri-apps/api/dialog';

document.getElementById('saveBtn').addEventListener('click', async () => {
    const content = document.getElementById('input').value;
    const filePath = await save({ defaultPath: 'note.txt' });
    if (filePath) {
        await writeFile({ path: filePath, contents: content });
        alert('File saved!');
    }
});

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h2>File Saver</h2>
        <textarea id='input' rows='5' cols='40'></textarea><br>
        <button id='saveBtn'>Save File</button>
        <script type='module' src='main.js'></script>
    </body>
</html>

Demonstrates saving a text file using the Tauri FS API.

Let’s Try →

Tauri Window Controller

// main.js
import { appWindow } from '@tauri-apps/api/window';

document.getElementById('minimize').addEventListener('click', () => appWindow.minimize());
document.getElementById('maximize').addEventListener('click', () => appWindow.toggleMaximize());
document.getElementById('close').addEventListener('click', () => appWindow.close());

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h2>Window Controller</h2>
        <button id='minimize'>Minimize</button>
        <button id='maximize'>Maximize</button>
        <button id='close'>Close</button>
        <script type='module' src='main.js'></script>
    </body>
</html>

Demonstrates basic window manipulation using Tauri's window API.

Let’s Try →

Tauri Shell Command Runner

// main.js
import { Command } from '@tauri-apps/api/shell';

document.getElementById('runBtn').addEventListener('click', async () => {
    const cmd = new Command('echo', ['Hello from Tauri']);
    const output = await cmd.execute();
    document.getElementById('output').textContent = output.stdout;
});

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h2>Shell Command Runner</h2>
        <button id='runBtn'>Run Command</button>
        <pre id='output'></pre>
        <script type='module' src='main.js'></script>
    </body>
</html>

Executes shell commands using the Tauri Shell API and shows the output.

Let’s Try →

Tauri Dialog Example

// main.js
import { open } from '@tauri-apps/api/dialog';

document.getElementById('openBtn').addEventListener('click', async () => {
    const file = await open({ multiple: false });
    document.getElementById('output').textContent = file || 'No file selected';
});

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h2>Dialog Example</h2>
        <button id='openBtn'>Open File</button>
        <p id='output'></p>
        <script type='module' src='main.js'></script>
    </body>
</html>

Shows how to use Tauri dialog boxes for open/save file selection.

Let’s Try →

Tauri Theme Toggle App

// main.js
import { Store } from 'tauri-plugin-store-api';
const store = new Store('.settings.dat');

async function setTheme(dark) {
    document.body.className = dark ? 'dark' : 'light';
    await store.set('darkMode', dark);
    await store.save();
}

document.getElementById('toggleBtn').addEventListener('click', async () => {
    const dark = document.body.classList.toggle('dark');
    await setTheme(dark);
});

(async () => {
    const darkMode = await store.get('darkMode');
    if (darkMode) document.body.classList.add('dark');
})();

// index.html
<!DOCTYPE html>
<html>
    <head>
        <style>
        body.dark { background: #222; color: #fff; }
        body.light { background: #fff; color: #000; }
        </style>
    </head>
    <body>
        <h2>Theme Toggle</h2>
        <button id='toggleBtn'>Toggle Theme</button>
        <script type='module' src='main.js'></script>
    </body>
</html>

Demonstrates a dark/light theme toggle with persistent state using Tauri Store API.

Let’s Try →

Code Sample Descriptions

Tauri Simple Todo App

// main.js (frontend)
document.getElementById('addBtn').addEventListener('click', () => {
    const input = document.getElementById('todoInput');
    const todo = input.value.trim();
    if(todo) {
        const list = document.getElementById('todoList');
        const li = document.createElement('li');
        li.textContent = todo;
        list.appendChild(li);
        input.value = '';
    }
});

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Todo App</h1>
        <input type='text' id='todoInput' placeholder='New Todo'>
        <button id='addBtn'>Add</button>
        <ul id='todoList'></ul>
        <script src='main.js'></script>
    </body>
</html>

Demonstrates a simple Tauri app with a Todo list using a web frontend (HTML/JS) and Tauri APIs for desktop integration.

Let’s Try →

Tauri File Reader App

// main.js
import { readTextFile } from '@tauri-apps/api/fs';

document.getElementById('readBtn').addEventListener('click', async () => {
    const filePath = document.getElementById('fileInput').value;
    try {
        const contents = await readTextFile(filePath);
        document.getElementById('output').textContent = contents;
    } catch (e) {
        alert('Failed to read file: ' + e);
    }
});

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h2>File Reader</h2>
        <input id='fileInput' placeholder='Path to file'>
        <button id='readBtn'>Read</button>
        <pre id='output'></pre>
        <script type='module' src='main.js'></script>
    </body>
</html>

Demonstrates a Tauri app that reads a file using the Tauri FS API and displays its content in the UI.

Let’s Try →

Tauri Clipboard Manager

// main.js
import { writeText, readText } from '@tauri-apps/api/clipboard';

document.getElementById('copyBtn').addEventListener('click', async () => {
    await writeText(document.getElementById('inputText').value);
    alert('Copied to clipboard!');
});

document.getElementById('pasteBtn').addEventListener('click', async () => {
    const text = await readText();
    document.getElementById('output').textContent = text;
});

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h2>Clipboard Manager</h2>
        <input id='inputText' placeholder='Text to copy'>
        <button id='copyBtn'>Copy</button>
        <button id='pasteBtn'>Paste</button>
        <p id='output'></p>
        <script type='module' src='main.js'></script>
    </body>
</html>

Demonstrates clipboard read/write using the Tauri Clipboard API.

Let’s Try →

Tauri Notification Example

// main.js
import { isPermissionGranted, requestPermission, sendNotification } from '@tauri-apps/api/notification';

document.getElementById('notifyBtn').addEventListener('click', async () => {
    let permissionGranted = await isPermissionGranted();
    if (!permissionGranted) {
        const permission = await requestPermission();
        permissionGranted = permission === 'granted';
    }
    if (permissionGranted) {
        sendNotification({ title: 'Tauri App', body: 'This is a desktop notification!' });
    }
});

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h2>Tauri Notification</h2>
        <button id='notifyBtn'>Send Notification</button>
        <script type='module' src='main.js'></script>
    </body>
</html>

Shows how to send native desktop notifications using the Tauri Notification API.

Let’s Try →

Tauri System Info App

// main.js
import { platform, version, arch } from '@tauri-apps/api/os';

document.addEventListener('DOMContentLoaded', async () => {
    document.getElementById('os').textContent = await platform();
    document.getElementById('arch').textContent = await arch();
    document.getElementById('ver').textContent = await version();
});

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h2>System Info</h2>
        <p>OS: <span id='os'></span></p>
        <p>Arch: <span id='arch'></span></p>
        <p>Version: <span id='ver'></span></p>
        <script type='module' src='main.js'></script>
    </body>
</html>

Displays system information like OS, architecture, and version using the Tauri OS API.

Let’s Try →

Tauri File Saver App

// main.js
import { writeFile } from '@tauri-apps/api/fs';
import { save } from '@tauri-apps/api/dialog';

document.getElementById('saveBtn').addEventListener('click', async () => {
    const content = document.getElementById('input').value;
    const filePath = await save({ defaultPath: 'note.txt' });
    if (filePath) {
        await writeFile({ path: filePath, contents: content });
        alert('File saved!');
    }
});

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h2>File Saver</h2>
        <textarea id='input' rows='5' cols='40'></textarea><br>
        <button id='saveBtn'>Save File</button>
        <script type='module' src='main.js'></script>
    </body>
</html>

Demonstrates saving a text file using the Tauri FS API.

Let’s Try →

Tauri Window Controller

// main.js
import { appWindow } from '@tauri-apps/api/window';

document.getElementById('minimize').addEventListener('click', () => appWindow.minimize());
document.getElementById('maximize').addEventListener('click', () => appWindow.toggleMaximize());
document.getElementById('close').addEventListener('click', () => appWindow.close());

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h2>Window Controller</h2>
        <button id='minimize'>Minimize</button>
        <button id='maximize'>Maximize</button>
        <button id='close'>Close</button>
        <script type='module' src='main.js'></script>
    </body>
</html>

Demonstrates basic window manipulation using Tauri's window API.

Let’s Try →

Tauri Shell Command Runner

// main.js
import { Command } from '@tauri-apps/api/shell';

document.getElementById('runBtn').addEventListener('click', async () => {
    const cmd = new Command('echo', ['Hello from Tauri']);
    const output = await cmd.execute();
    document.getElementById('output').textContent = output.stdout;
});

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h2>Shell Command Runner</h2>
        <button id='runBtn'>Run Command</button>
        <pre id='output'></pre>
        <script type='module' src='main.js'></script>
    </body>
</html>

Executes shell commands using the Tauri Shell API and shows the output.

Let’s Try →

Tauri Dialog Example

// main.js
import { open } from '@tauri-apps/api/dialog';

document.getElementById('openBtn').addEventListener('click', async () => {
    const file = await open({ multiple: false });
    document.getElementById('output').textContent = file || 'No file selected';
});

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h2>Dialog Example</h2>
        <button id='openBtn'>Open File</button>
        <p id='output'></p>
        <script type='module' src='main.js'></script>
    </body>
</html>

Shows how to use Tauri dialog boxes for open/save file selection.

Let’s Try →

Tauri Theme Toggle App

// main.js
import { Store } from 'tauri-plugin-store-api';
const store = new Store('.settings.dat');

async function setTheme(dark) {
    document.body.className = dark ? 'dark' : 'light';
    await store.set('darkMode', dark);
    await store.save();
}

document.getElementById('toggleBtn').addEventListener('click', async () => {
    const dark = document.body.classList.toggle('dark');
    await setTheme(dark);
});

(async () => {
    const darkMode = await store.get('darkMode');
    if (darkMode) document.body.classList.add('dark');
})();

// index.html
<!DOCTYPE html>
<html>
    <head>
        <style>
        body.dark { background: #222; color: #fff; }
        body.light { background: #fff; color: #000; }
        </style>
    </head>
    <body>
        <h2>Theme Toggle</h2>
        <button id='toggleBtn'>Toggle Theme</button>
        <script type='module' src='main.js'></script>
    </body>
</html>

Demonstrates a dark/light theme toggle with persistent state using Tauri Store API.

Let’s Try →