IconVault logoIconVault
Sign in

Window Controls Overlay - Interactive Tool | IconVault

Learn Window Controls Overlay: live titlebar geometry detection, drag-region mock preview, and a manifest builder. Free.

All tools

Window Controls Overlay

Custom PWA title bars with drag regions and live geometry

5 of 5 free uses left

API support

Checking…

navigator.windowControlsOverlay

Display mode

Checking…

matchMedia("(display-mode: window-controls-overlay)")

Titlebar rect

not available

getTitlebarAreaRect(), updates on geometrychange

Mock titlebar preview

This is a static mock showing drag vs clickable regions. In a real PWA the top area would be your HTML, with the native window controls pushed to the side.

DRAG REGIONMy PWA
Your app content starts here, full-bleed under the title bar.
#0f766e

Titlebar CSS

/* Custom title bar that fills the overlay area */
#titlebar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: env(titlebar-area-height, 40px);
  -webkit-app-region: drag;   /* whole bar drags the window */
  app-region: drag;
  background: #0f766e;
  color: #fff;
  display: flex;
  align-items: center;
  padding-left: env(titlebar-area-x, 0px);
  width: env(titlebar-area-width, 100%);
}

#titlebar button {
  -webkit-app-region: no-drag; /* keep controls clickable */
  app-region: no-drag;
}

Manifest builder

The magic line is display_override: ["window-controls-overlay"]. Without it the browser never enters overlay mode.

{
  "name": "My PWA",
  "short_name": "My PWA",
  "start_url": "/",
  "display": "standalone",
  "display_override": [
    "window-controls-overlay"
  ],
  "theme_color": "#0f766e"
}

5 of 5 free downloads left.

About this tool

IconVault's Window Controls Overlay playground teaches the PWA API that lets your installed app draw its own title bar. It detects navigator.windowControlsOverlay for real, reads the live titlebar area rect when you are inside an installed PWA, and is honest when you are just in a regular browser tab. It is free and runs fully in your browser.

Alongside detection you get a visual mock of drag regions versus clickable controls, a titlebar CSS snippet using env(titlebar-area-*) variables and app-region, and a manifest builder that generates the display_override block your manifest needs. Copy the pieces straight into your PWA.

Frequently asked questions

Popular searches

window controls overlaywindowControlsOverlaypwa title barcustom titlebar pwadisplay_override window-controls-overlayapp-region dragtitlebar-area-heightenv titlebar-area-xpwa window controlslearn window controls overlaywindow controls overlay tutorialwindow controls overlay examplenavigator.windowControlsOverlaygetTitlebarAreaRectgeometrychange eventdisplay-mode window-controls-overlaypwa manifest buildermanifest display_overrideinstallable web app titlebardesktop pwa custom chromeframeless pwa windowpwa native lookchromium pwa apispwa capabilitieswindow controls overlay supportcustom window chrome webdrag region csswebkit-app-regionno-drag button pwatitlebar css snippetpwa design guidedesktop web app uitauri vs pwa titlebarelectron frameless vs pwaweb app manifest generatortheme_color manifestpwa manifest exampleoverlay title bar webbrowser window customizationweb api playgroundlearn browser apislearn pwapwa tutorialprogressive web app guidepwa manifest display modesstandalone vs window-controls-overlaypwa install promptpwa custom title baroverlay scrollbar pwadesktop pwa ui patterns

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →