Open a Second Window in Tauri 2 | Multi-Window React + Rust Tutorial

About this lesson

Open a second OS window from your Tauri 2 app in about fifty lines of code. The WebviewWindow API lets a React button spawn a real native window with its own URL, its own size, and its own lifecycle — no Electron, no pop-up hacks, just native windows. Source code: https://github.com/GoCelesteAI/tauri_multiwin We build MultiWin, a deliberately minimal demo: a main window with a button that opens a second window labeled "settings", and each window can close the other. The whole thing is one App.tsx and zero new Rust commands — the multi-window API is pure JavaScript. What You'll Learn: - WebviewWindow from @tauri-apps/api/webviewWindow — the JS-side API for creating windows at runtime. - Window labels — every window has a unique string label; getByLabel("settings") returns the existing one if it's already open, so you can focus instead of duplicate. - Hash-routing two views from one React app — index.html#settings lets the same bundle render either the main UI or the settings UI based on window.location.hash. - getCurrentWebviewWindow().close() — close-self pattern for the secondary window. - Capability gates — core:webview:allow-create-webview-window is the permission your capabilities/default.json needs before the API call works at runtime. - Window options that matter — width, height, title, resizable, center — set once at creation, harder to change later. Timestamps: 0:00 - Two windows. One app. Here is the build. 0:15 - Capability config — the permission gate 0:45 - App.tsx — main window and the open-settings button 2:15 - App.tsx — settings window and close-self 3:00 - Run it — click open, click close 3:45 - End screen Key Takeaways: 1. WebviewWindow is the runtime window API. import { WebviewWindow } from "@tauri-apps/api/webviewWindow"; call new WebviewWindow(label, options); the second window is born. The label is your handle for everything that follows (focus, close, listen). Pick stable label strings — "settings", "about", "preview" — and keep them in

Original Description