Tauri Window Customization Tutorial: Frameless Windows & Custom Titlebars

Tauri Window Customization Tutorial: Frameless Windows & Custom Titlebars

Customizing your Tauri desktop app window allows you to create a unique and polished user interface. This tutorial demonstrates how to configure window properties in tauri.conf.json, create frameless windows by disabling native decorations, and build a custom titlebar with draggable regions and window control buttons using the Tauri Window API.

Code

{
  "tauri": {
    "windows": [{
      "title": "My App",           // Window title
      "width": 900,                // Initial width
      "height": 700,               // Initial height
      "resizable": true,           // Allow resizing
      "decorations": false,        // Disable native title bar and borders (frameless)
      "minWidth": 400,             // Minimum width constraint
      "minHeight": 300             // Minimum height constraint
    }]
  }
}

/* HTML for a custom titlebar with drag region and control buttons */
<div id="titlebar" data-tauri-drag-region>
  <div class="title">My App</div>
  <div class="window-controls">
    <button id="minimize">_</button>
    <button id="maximize">⬜</button>
    <button id="close">✕</button>
  </div>
</div>

/* JavaScript to control window actions using Tauri Window API */
import { getCurrentWindow } from '@tauri-apps/api/window'

const appWindow = getCurrentWindow()

document.getElementById('minimize').addEventListener('click', () => {
  appWindow.minimize()
})

document.getElementById('maximize').addEventListener('click', async () => {
  const isMaximized = await appWindow.isMaximized()
  if (isMaximized) {
    appWindow.unmaximize()
  } else {
    appWindow.maximize()
  }
})

document.getElementById('close').addEventListener('click', () => {
  appWindow.close()
})

Key Points

• Set decorations: false in tauri.conf.json to create a frameless window without native borders or titlebar.
• Use data-tauri-drag-region attribute on elements to make them draggable and enable window movement.
• Build custom window control buttons (minimize, maximize, close) and connect them to Tauri’s Window API methods.
• The getCurrentWindow() function provides access to window control methods like minimize(), maximize(), and close().
• Configure window size and resize constraints in tauri.conf.json to control app window behavior and appearance.