Decorations, Transparency, Always-on-Top

"The frame is a window concern; the contents are a CSS concern. Custom-looking apps blur the line — on purpose."

The Knobs on the Frame

A window's chrome is configured with a handful of properties, settable in tauri.conf.json or via the builder: decorations (the OS title bar and borders — turn off for a custom look), transparent (let the desktop show through), always_on_top (float above other apps), resizable, min/max inner size, and shadow. These shape the box; your HTML/CSS fills it.

Going Frameless

Set decorations(false) and the OS title bar disappears — now you draw your own. But a frameless window can't be dragged by an OS title bar that no longer exists, so you mark a region of your HTML as the drag handle with data-tauri-drag-region. That element becomes the 'grab here to move the window' zone. This is how apps get a custom header bar with their own buttons while still moving like a native window.

Transparency Is Platform-Sensitive

transparent(true) lets you build floating panels and rounded non-rectangular windows, but it interacts with the OS compositor differently on each platform and pairs with CSS (a transparent or semi-transparent background). On macOS you may also use titleBarStyle to overlay content under a translucent title bar. Test transparency on every target you ship to — it's exactly the kind of feature that looks perfect on your Mac and wrong on Linux.

Code

Building a custom-chrome window·rust

use tauri::{WebviewWindowBuilder, WebviewUrl};

// A frameless, floating, transparent panel.
WebviewWindowBuilder::new(&app, "palette", WebviewUrl::App("index.html#/palette".into()))
    .decorations(false)      // no OS title bar/borders
    .transparent(true)       // desktop shows through (pair with CSS)
    .always_on_top(true)     // floats above other windows
    .resizable(false)
    .inner_size(320.0, 480.0)
    .shadow(true)
    .build()?;

data-tauri-drag-region makes a custom title bar draggable·html

<!-- In a frameless window, mark your header as the drag handle. -->
<header data-tauri-drag-region class="app-titlebar">
  <span data-tauri-drag-region>My App</span>
  <!-- Buttons must NOT have the drag attribute, or clicks become drags. -->
  <button class="win-close" onclick="...">×</button>
</header>

Exercise

Turn a window frameless (decorations: false) and build a custom title bar in HTML with a data-tauri-drag-region header plus a working close button. Confirm you can drag the window by the header but still click the button. If the button drags instead of clicking, you put the drag attribute on it — that mistake is the lesson.

Hint

data-tauri-drag-region goes on the header container and empty spans, never on the button. The close button calls getCurrentWindow().close() from @tauri-apps/api/window.