2021-06-02 14:55:07 +03:00
---
title: Window Customization
---
Tauri provides lots of options for customizing the look and feel of your app's window. You can create custom titlebars, have transparent windows, enforce size constraints, and more.
## Configuration
There are three ways to change the window configuration:
- [Through tauri.conf.json ](https://tauri.studio/en/docs/api/config/#tauri.windows )
2021-06-30 21:32:38 +03:00
- [Through the JS API ](https://tauri.studio/en/docs/api/js/classes/window.windowmanager )
2021-07-01 01:08:48 +03:00
- [Through the Window in Rust ](https://tauri.studio/en/docs/api/rust/tauri/window/struct.window )
2021-06-02 14:55:07 +03:00
## Creating a Custom Titlebar
A common use of these window features is creating a custom titlebar. This short tutorial will guide you through that process.
### CSS
You'll need to add some CSS for the titlebar to keep it at the top of the screen and style the buttons:
```css
.titlebar {
height: 30px;
background: #329ea3 ;
user-select: none;
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.titlebar-button {
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
}
.titlebar-button:hover {
background: #5bbec3 ;
}
```
### HTML
Now, you'll need to add the HTML for the titlebar. Put this at the top of your `<body>` tag:
```html
2021-06-29 02:13:41 +03:00
< div data-tauri-drag-region class = "titlebar" >
2021-06-02 14:55:07 +03:00
< div class = "titlebar-button" id = "titlebar-minimize" >
< img
src="https://api.iconify.design/mdi:window-minimize.svg"
alt="minimize"
/>
< / div >
< div class = "titlebar-button" id = "titlebar-maximize" >
< img
src="https://api.iconify.design/mdi:window-maximize.svg"
alt="maximize"
/>
< / div >
< div class = "titlebar-button" id = "titlebar-close" >
< img src = "https://api.iconify.design/mdi:close.svg" alt = "close" / >
< / div >
< / div >
```
Note that you may need to move the rest of your content down so that the titlebar doesn't cover it.
### JS
Finally, you'll need to make the buttons work:
```js
import { appWindow } from '@tauri-apps/api/window'
document
.getElementById('titlebar-minimize')
.addEventListener('click', () => appWindow.minimize())
document
.getElementById('titlebar-maximize')
2021-08-02 16:43:31 +03:00
.addEventListener('click', () => appWindow.toggleMaximize())
2021-06-02 14:55:07 +03:00
document
.getElementById('titlebar-close')
.addEventListener('click', () => appWindow.close())
```
