CodeSpeedTest [CST]

Learn Tauri - 10 Code Examples & CST Typing Practice Test

Tauri is an open-source framework for building tiny, secure, and fast desktop applications using web technologies (HTML, CSS, JS) while leveraging Rust for backend functionality. It works with frontend frameworks like React, Vue, Angular, and Svelte.

View all 10 Tauri code examples →

Tauri Simple Todo App Tauri File Reader App Tauri Clipboard Manager Tauri Notification Example Tauri System Info App Tauri File Saver App Tauri Window Controller Tauri Shell Command Runner Tauri Dialog Example Tauri Theme Toggle App

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

1

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 →

2

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 →

3

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 →

4

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 →

5

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 →

6

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 →

7

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 →

8

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 →

9

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 →

10

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 →

Frequently Asked Questions about Tauri

What is Tauri?

Tauri is an open-source framework for building tiny, secure, and fast desktop applications using web technologies (HTML, CSS, JS) while leveraging Rust for backend functionality. It works with frontend frameworks like React, Vue, Angular, and Svelte.

What are the primary use cases for Tauri?

Cross-platform desktop apps for Windows, macOS, and Linux. Electron alternative for smaller binaries and better security. Internal tools and utilities for businesses. Apps requiring frontend-backend separation. Desktop apps integrating web-based UI frameworks

What are the strengths of Tauri?

Small app size (a few MBs). High performance and native feel. Strong security by default. Frontend agnostic-works with React, Vue, Angular, Svelte. Rust-based backend ensures memory safety and concurrency

What are the limitations of Tauri?

Requires Rust knowledge for backend customizations. Smaller community than Electron. Some native APIs may require manual bindings. Not ideal for apps needing heavy graphics rendering. Limited ecosystem of plugins compared to Electron

How can I practice Tauri typing speed?

CodeSpeedTest offers 10+ real Tauri code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Learn Tauri - Code Examples & CST Typing Practice Test | CodeSpeedTest