tauri-window-customization_skill

Overview

This skill guides developers through Tauri v2 window customization, covering custom titlebars, transparent windows, drag regions, and app menus with keyboard shortcuts. It shows configuration options (tauri.conf.json), frontend and backend APIs, and platform-specific tips for macOS. Followable code patterns and UI examples make it practical for desktop apps.

How this skill works

The skill explains three configuration methods: static settings in tauri.conf.json, runtime controls via the JavaScript Window API, and backend control via the Rust Window struct. It demonstrates how to disable native decorations, implement a HTML/CSS/JS titlebar with draggable regions, wire window controls to the Tauri window API, and create platform-aware menus and accelerators. macOS-specific techniques for transparent titlebars and native appearance are included.

When to use it

• You want a custom, consistent titlebar across platforms or a branded chrome-free UI.
• You need transparent windows or macOS transparent titlebar behavior while preserving native features where possible.
• You must implement application menus, submenus, check items, and keyboard accelerators.
• You want runtime control of window behavior from frontend code or Rust backend.
• You need dynamic menu updates or to handle menu events centrally in Rust or JS.

Best practices

• Disable decorations in tauri.conf.json, then implement a semantic HTML titlebar with data-tauri-drag-region on draggable elements.
• Keep buttons and interactive controls outside drag regions or add the attribute per draggable child to preserve interactivity.
• Declare window permissions in src-tauri/capabilities/default.json to allow dragging and window actions when using custom titlebars.
• Use accelerators (e.g., CmdOrCtrl+S) for common shortcuts and test them on each target OS, especially macOS.
• Group items under submenus for macOS menus; top-level items may be ignored by the OS.

Example use cases

• A cross-platform app that needs a branded titlebar with custom controls and drag-to-move behavior.
• Building a macOS app that uses a transparent titlebar with a colored background while preserving native window features.
• Adding an Edit and File menu with accelerators like CmdOrCtrl+N and CmdOrCtrl+S and handling events in Rust.
• Creating dynamic status menu items that update text or checked state at runtime from JS or Rust.
• Implementing manual double-click maximize or custom startDragging behavior on your titlebar element.