Window Configuration

The windows array inside the app configuration section is where you define every window your Tauri application can open. Each entry is an object with a unique label and a set of properties that control how that window looks and behaves when the app starts. You can declare multiple windows here, and each will be created automatically at launch. Windows that need to appear later—like settings panels or secondary views—can also be spawned at runtime, but the configuration is always the starting point for the ones your app ships with.

Every window object requires at least a label and a title. The label is an internal identifier used by Tauri to refer to a specific window across your frontend and Rust code. The title is the human-readable text shown in the window’s title bar. If you do not specify a url, the window loads your application’s default entry point, which is the index.html inside frontendDist.

Creating Windows

A minimal window definition tells Tauri to open a single labeled window with a title and default size when the app launches.

{
  "app": {
    "windows": [
      {
        "label": "main",
        "title": "My Application",
        "width": 800,
        "height": 600
      }
    ]
  }
}

The label must be unique across all windows—both those defined in the configuration and any created at runtime. Duplicate labels cause Tauri to exit with an error, because the runtime uses labels to track each window instance.

You are not limited to windows that appear at startup. Setting visible: false lets you define a window in the config but show it later from your frontend or Rust code using WebviewWindow.getByLabel("settings")?.show(). This is useful for secondary windows that need to exist before they are displayed, for example windows that receive events in the background.

Programmatic creation from the frontend is also possible, though it relies on the Tauri runtime being ready. The @tauri-apps/api package exposes a WebviewWindow constructor that mirrors most configuration properties.

import { WebviewWindow } from '@tauri-apps/api/webviewWindow';
function openSettings() {
  new WebviewWindow('settings', {
    url: '/settings.html',
    title: 'Settings',
    width: 450,
    height: 350,
    resizable: false,
    center: true,
  });
}

Window Size & Position

Size and placement are controlled by width, height, x, y, minWidth, minHeight, maxWidth, maxHeight, and center. If you omit width and height, Tauri uses a default of 800×600 pixels. The x and y coordinates set the window’s top‑left corner relative to the primary monitor’s top‑left origin; if you leave them out, the operating system decides where the window appears.

{
  "app": {
    "windows": [
      {
        "label": "editor",
        "title": "Code Editor",
        "width": 1024,
        "height": 768,
        "minWidth": 640,
        "minHeight": 480,
        "maxWidth": 1920,
        "maxHeight": 1080,
        "center": true
      }
    ]
  }
}

When center is true, the window is automatically centered on the primary monitor. This flag takes precedence over x and y: if both center and explicit coordinates are set, the centered position wins. The constraints minWidth, minHeight, maxWidth, and maxHeight prevent the user—or your code—from resizing the window beyond those limits. Setting a minimum greater than a maximum is logically inconsistent; Tauri will not warn you, but the window’s resize behavior becomes unpredictable, so it is best to keep these values sensible.

Window Behavior

Behavioral flags determine what the user can do with the window and how it interacts with the desktop environment. The most commonly used flags are:

These properties are independent; you can mix them to produce windows that behave as floating toolbars, borderless overlays, or standard application windows.

{
  "app": {
    "windows": [
      {
        "label": "overlay",
        "title": "Floating Tool",
        "width": 300,
        "height": 200,
        "decorations": false,
        "alwaysOnTop": true,
        "skipTaskbar": true,
        "resizable": false
      }
    ]
  }
}

A window without decorations has no native title bar, close button, or minimize/maximize controls. Users cannot drag it by its frame, so you must implement custom drag regions in your frontend with the data-tauri-drag-region attribute if the window needs to be movable.

Window Appearance

Visual appearance is controlled by title, url, transparent, and windowEffects. The title is what the user sees in the title bar; url overrides the default loaded page so you can point a window to a separate HTML file or an external URL if permitted by your Content Security Policy.

Transparency unlocks non‑rectangular window shapes. When transparent is true, the webview’s background becomes translucent, and any pixel not drawn by your frontend is completely transparent. This allows you to create rounded corners, custom window shapes, and seamless overlays.

windowEffects applies platform‑specific visual effects to the window’s background. On Windows, you can use acrylic, mica, or tabbed; on macOS, vibrancy with various styles (like sidebar, fullscreenUI, or hudWindow) is available.

{
  "app": {
    "windows": [
      {
        "label": "styled",
        "title": "Modern UI",
        "width": 800,
        "height": 600,
        "transparent": true,
        "windowEffects": {
          "effects": ["mica"]
        }
      }
    ]
  }
}

On macOS, using vibrancy requires the macOSPrivateApi setting to be enabled in the app configuration. Without it, the effect is silently ignored.

The shadow property (default true) controls the drop shadow around the window. Setting it to false removes the shadow, which can be desirable for completely seamless overlays or custom‑shaped windows.

Configuring windows is the first step toward shaping how users experience your application. Every window you define becomes a surface for your frontend, and the combination of size, behavior, and appearance gives you precise control over the desktop‑native feel of each one.