Window customization configuration methods
Window configuration in Tauri can be changed through three ways: tauri.conf.json configuration file, JavaScript API, or Rust Window API.
architecture
92 notes in this subject, read out of this brain and free to use. This is page 2 of 2.
Manual window dragging with startDragging
The `window.startDragging()` method can be called from an event listener to manually implement window dragging, allowing customization of drag behavior beyond using the `data-tauri-drag-region` attribute.
Custom titlebar JavaScript implementation
To implement a custom titlebar, use the JavaScript API to attach click handlers to titlebar buttons: `appWindow.minimize()` for the minimize button, `appWindow.toggleMaximize()` for the maximize button, and `appWindow.close()` for the close button. Import getCurrentWindow from '@tauri-apps/api/window'.
Double-click window drag for maximize
When implementing custom window dragging, check the `e.detail` property of the mousedown event: if it equals 2, the user double-clicked and can trigger `appWindow.toggleMaximize()`, otherwise call `appWindow.startDragging()` for single-click dragging.
macOS transparent titlebar configuration
On macOS, use `TitleBarStyle::Transparent` when building a WebviewWindow to create a transparent titlebar. This allows setting a custom background color for the window while maintaining the transparent titlebar effect.
macOS window background color with native API
On macOS, use the `objc2-app-kit` crate to access native NSWindow and NSColor APIs. Call `window.ns_window()` to get the NSWindow pointer, then use `NSColor::colorWithRed_green_blue_alpha()` and `setBackgroundColor()` to set the window background color.
Windows drag region CSS for touch and pen input
On Windows, use the CSS rule `*[data-tauri-drag-region] { app-region: drag; }` to make the titlebar work with touch and pen inputs in addition to mouse input.
Custom titlebar loses native window features on macOS
When using a custom titlebar on macOS by disabling decorations, some system-provided features are lost, such as moving or aligning the window. An alternative approach is to use a transparent titlebar and set a custom window background color to maintain native functionality.
Custom titlebar positioning and layout
A custom titlebar should be positioned fixed at the top of the screen with height, background color, and layout defined via CSS. Content below the titlebar should be moved down to prevent overlap. The titlebar can use CSS Grid with `grid-template-columns: auto max-content` to position a drag region and control buttons.
macOS transparent titlebar dependency
To use macOS native APIs for transparent titlebar customization, add the `objc2-app-kit` crate as a target-specific dependency: `objc2-app-kit = { version = "0.3.2", features = ["NSColor", "NSWindow", "objc2-core-foundation"] }` in the `[target."cfg(target_os = \"macos\")".dependencies]` section of Cargo.toml.
Create icon menu items
In JavaScript, use IconMenuItem.new() with id, text, icon (Image object from @tauri-apps/api/image), and action callback. In Rust, use IconMenuItemBuilder::new() with icon() method and build(). Call setIcon() to change the icon dynamically. Load icons with Image.fromPath() or Image::from_bytes().
Menu item accelerator keyboard shortcuts
Set keyboard shortcuts on menu items using the action parameter in JavaScript or Some() parameter in Rust. Syntax examples: 'Ctrl+Z', 'Ctrl+L'. Update accelerators dynamically with setAccelerator() in JavaScript or set_accelerator() in Rust.
Native icons on menu items and submenus
In Rust, use setNativeIcon() or set_native_icon() methods with tauri::menu::NativeIcon enum values (e.g., NativeIcon::Folder). On each platform, only one icon type applies (custom icon or native icon, not both).
Window menus available on desktop only
Native application menus can be attached to windows or system tray, but are only available on desktop platforms (Windows, macOS, Linux).
Menu.new JavaScript API creates window menu
Use Menu.new() static function from @tauri-apps/api/menu to create a native window menu with an items array containing menu item objects. Each item can have id (string), text (string), action (function callback), checked (boolean for check items), and enabled (boolean). Use item: 'Separator' to add separators.
Menu.setAsAppMenu() attaches menu to window
Call menu.setAsAppMenu() to attach a created menu to a window. If a window was not created with an explicit menu or had one set explicitly, this menu will be assigned to it. Returns a promise that resolves when the menu is successfully set.
Update individual menu item properties in JavaScript
Retrieve a menu item using menu.get(itemId) which returns a promise resolving to the item, then call setText() on the item to update its text. Check items can be updated with setChecked(), icon items with setIcon(), and items can be updated with setAccelerator() for keyboard shortcuts.
MenuBuilder Rust API for creating window menus
Use MenuBuilder::new(app) to create a menu in Rust. Chain methods like .text(id, label), .check(id, label), .separator(), and .build()? to construct the menu. Attach with app.set_menu(menu)?. Methods available: text(), check(), separator(), and item().
Handle menu item clicks with on_menu_event in Rust
Use app.on_menu_event() callback to handle menu item clicks. The callback receives app_handle and event parameters. Access the menu item ID with event.id().0.as_str() and match against the item id to perform actions.
Multi-level submenus grouping and behavior
Use Submenu.new() in JavaScript or SubmenuBuilder in Rust to create grouped menu items under categories. On MacOS, all items must be grouped under a submenu; top-level items are ignored. The first submenu is placed under the application's about menu by default on MacOS, regardless of its text label.
Submenu icon support in Tauri 2.8.0+
Icon support for submenus is available starting from Tauri 2.8.0. In JavaScript, use Submenu.new() with icon parameter (string like 'folder') or call setIcon()/setNativeIcon() on the submenu object. In Rust, use SubmenuBuilder.submenu_icon() method with an Image.
PredefinedMenuItem for native menu items
Use PredefinedMenuItem.new() in JavaScript or PredefinedMenuItem methods in Rust to create built-in menu items with predefined OS or Tauri behavior. Available items: Copy, Cut, Paste, SelectAll, Undo, Redo, Separator. In Rust, MenuBuilder has dedicated methods like .copy(), .cut(), .paste(), .select_all(), .undo(), .redo().
Create check menu items
In JavaScript, use CheckMenuItem.new() with id, text, checked (boolean), and action callback. In Rust, use CheckMenuItemBuilder::new() or CheckMenuItemBuilder::with_id() with checked() and build() methods. Call setChecked() on items to update their state.
Rust API surface refactoring in Tauri 2.0 RC
Tauri 2.0 RC introduced significant changes to the public Rust API surface. Publicly exposed components meant for internal use were reduced, structures were made non-exhaustive or converted to builder patterns/constructors, some structures received an 'extend' field for future dynamic additions, and modules were documented as stable or unstable. These changes ensure Tauri can provide security fixes without breaking stable interfaces.
Tauri definition and target platforms
Tauri is a framework for building tiny and fast binaries for all major desktop platforms (macOS, Linux, Windows) and mobile platforms (iOS, Android). Developers can integrate any frontend framework that compiles to HTML, JavaScript, and CSS for the user experience while leveraging languages such as Rust, Swift, and Kotlin for backend logic.
Multiwebview support in Tauri 2.0
Tauri 2.0 added multiwebview support behind the unstable feature flag. See WindowBuilder and WebviewBuilder for more information.
Window and Webview types restructured in Tauri 2.0
Tauri 2.0 introduced `tauri::Webview`, `tauri::WebviewBuilder`, `tauri::WebviewWindow`, and `tauri::WebviewWindowBuilder` structs in Rust with equivalent classes in JavaScript. The old `tauri::Window` and `tauri::WindowBuilder` behaviors have moved to `tauri::WebviewWindow` and `tauri::WebviewWindowBuilder`. Equivalent functions like `getAll` and `getCurrent` in the JS `window` module were renamed to `getAllWindows` and `getCurrentWindow`, but `getAllWebviewWindows` and `getCurrentWebviewWindow` from the `webviewWindow` module are likely what users want.
Application restart and exit in Tauri 2.0
Tauri 2.0 marked `AppHandle::restart` and `process::restart` as diverging functions. Changed `AppHandle::exit` and `AppHandle::restart` to trigger `RunEvent::ExitRequested` and `RunEvent::Exit`. Added `tauri::App/AppHandle::cleanup_before_exit` to manually call the cleanup logic; the application should exit immediately after this function returns.
Run iteration API change in Tauri 2.0
Tauri 2.0 changed `tauri::App::run_iteration` to take a callback and removed its return value.
Window event handler changes in Tauri 2.0
Tauri 2.0 removed `tauri::GlobalWindowEvent` struct and unpacked its fields to be passed directly to `tauri::Builder::on_window_event`. Removed `tauri::EventHandler` type.
AppHandle and Manager interface changes in Tauri 2.0
Tauri 2.0 changed `tauri::App::handle` and `tauri::Manager::app_handle` methods to return a reference to an `AppHandle` instead of an owned value.
Window creation timing change in Tauri 2.0
Tauri 2.0 changed the window creation and setup hook to be called when the event loop is ready.