Window Customization | Electron
https://www.electronjs.org/docs/latest/tutorial/window-customization • 41 KB fetched Open original page
Window Customization | Electron
Skip to main content
Electron Docs API Blog Tools
* Electron Forge
* Electron Fiddle
Community
* Governance
* Showcase
* Resources
Releases English
* English
* Deutsch
* Español
* Français
* 日本語
* Português
* Русский
* 中文
Search
* Get Started
* Processes in Electron
* Best Practices
* Examples
* Dark Mode
* Device Access
* In-App Purchases
*
* Keyboard Shortcuts
* Deep Links
* Desktop Launcher Actions
*
* Menus
* Multithreading
* Native File Drag & Drop
* Navigation History
* Notifications
* Offscreen Rendering
* Online/Offline Event Detection
* Progress Bars
* Recent Documents
*
*
* Representing Files in a BrowserWindow
*
* SpellChecker
* Web Embeds
* Taskbar Customization
*
* Window Customization
* Custom Title Bar
* Custom Window Interactions
* Custom Window Styles
* Development
* Native Node Modules
* Distribution
* Testing And Debugging
* References
* Contributing
*
* Examples
* Window Customization Window Customization
The BrowserWindow module is the foundation of your Electron application, and
it exposes many APIs that let you customize the look and behavior of your app’s windows.
This section covers how to implement various use cases for window customization on macOS,
Windows, and Linux.
note
BrowserWindow is a subclass of the BaseWindow module. Both modules allow
you to create and manage application windows in Electron, with the main difference
being that BrowserWindow supports a single, full size web view while BaseWindow
supports composing many web views. BaseWindow can be used interchangeably with BrowserWindow
in the examples of the documents in this section.
📄️ Custom Title Bar
Application windows have a default chrome applied by the OS. Not to be confused with the Google Chrome browser, window _chrome_ refers to the parts of the window (e.g. title bar, toolbars, controls) that are not a part of the main web content. While the default title bar provided by the OS chrome is sufficient for simple use cases, many applications opt to remove it. Implementing a custom title bar can help your application feel more modern and consistent across platforms.
📄️ Custom Window Interactions
By default, windows are dragged using the title bar provided by the OS chrome. Apps that remove the default title bar need to use the app-region CSS property to define specific areas that can be used to drag the window. Setting app-region: drag marks a rectangular area as draggable.
📄️ Custom Window Styles
!Frameless Window
Edit this page
Previous
Taskbar Customization
Next
Custom Title Bar
Docs
* Getting Started
* API Reference
Checklists
* Performance
* Security
Tools
* Electron Forge
* Electron Fiddle
Community
* Governance
* Resources
* Discord
* Bluesky
* X
* Mastodon
* Stack Overflow
More
* GitHub
* Open Collective
* Infrastructure Dashboard
Copyright OpenJS Foundation and Electron contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation , please see our Trademark Policy and Trademark List . Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. The OpenJS Foundation | Terms of Use | Privacy Policy | Bylaws | Code of Conduct | Trademark Policy | Trademark List | Cookie Policy
Hosting and infrastructure graciously provided by
Links found on this page
- Skip to main content [direct]
- Electron [direct]
- Docs [direct]
- API [direct]
- Blog [direct]
- Electron Forge [direct]
- Electron Fiddle [direct]
- Governance [direct]
- Showcase [direct]
- Resources [direct]
- Releases [direct]
- Deutsch [direct]
- Español [direct]
- Français [direct]
- 日本語 [direct]
- Português [direct]
- Русский [direct]
- 中文 [direct]
- Processes in Electron [direct]
- Best Practices [direct]
- Examples [direct]
- Dark Mode [direct]
- Device Access [direct]
- In-App Purchases [direct]
- Keyboard Shortcuts [direct]
- Deep Links [direct]
- Desktop Launcher Actions [direct]
- Menus [direct]
- Multithreading [direct]
- Native File Drag & Drop [direct]
- Navigation History [direct]
- Notifications [direct]
- Offscreen Rendering [direct]
- Online/Offline Event Detection [direct]
- Progress Bars [direct]
- Recent Documents [direct]
- Representing Files in a BrowserWindow [direct]
- SpellChecker [direct]
- Web Embeds [direct]
- Taskbar Customization [direct]
- Custom Title Bar [direct]
- Custom Window Interactions [direct]
- Custom Window Styles [direct]
- Development [direct]
- Native Node Modules [direct]
- Distribution [direct]
- Testing And Debugging [direct]
- References [direct]
- Contributing [direct]
- BrowserWindow [direct]
- BaseWindow [direct]
- Edit this page [direct]
- Security [direct]
- Discord [direct]
- Bluesky [direct]
- X [direct]
- Mastodon [direct]
- Stack Overflow [direct]
- GitHub [direct]
- Open Collective [direct]
- Infrastructure Dashboard [direct]
- OpenJS Foundation [direct]
- Trademark Policy [direct]
- Trademark List [direct]
- Terms of Use [direct]
- Privacy Policy [direct]
- Bylaws [direct]
- Code of Conduct [direct]
- Cookie Policy [direct]
|
|