How to create a custom frameless window (without title bar) with minimize,maximize and close controls in Electron Framework

Learn how to create a frameless window with custom controls (minimize, maximize and close buttons) in Electron Framework.

To create a window without chrome, or a transparent window in arbitrary shape, you need to use the Frameless Window API. This "api" allow you to create a frameless window that has no chrome, the parts of the window, like toolbars, that are not a part of the web page.

In a browser, the chrome is any visible aspect of a browser aside from the webpages themselves (e.g., toolbars, menu bar, tabs). To create a frameless window, you need to set the frame property to false in the BrowserWindow instance that you want:

const {BrowserWindow} = require('electron')

let win = new BrowserWindow({
    width: 800, 
    height: 600, 
    frame: false
})

win.show()

Tipically, you may want to enable this feature in your main Window (main.js), that should be similar to:

function createWindow () {
    // Create the browser window.
    mainWindow = new BrowserWindow({width: 800, height: 600, frame: false})

    // and load the index.html of the app.
    mainWindow.loadURL(`file://${__dirname}/index.html`)

    // Open the DevTools.
    mainWindow.webContents.openDevTools()

    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
    })
}

Whose execution should create a window similar to:

However, you probably don't want to remove the user the possibility to close, minimize or maximize your app, so you need to learn how to do it. Those methods are available in the BrowserWindow, so you only need to retrieve the focused window using the BrowserWindow constant when you are in the renderer process:

const {BrowserWindow} = require('electron').remote;
// Retrieve focused window
var theWindow = BrowserWindow.getFocusedWindow();

// Execute common tasks
// Minimize
theWindow.minimize();
// Maximize app
theWindow.maximize();
// Close app
theWindow.close();

The typical buttons but with some CSS and HTML

You can create the same toolbar that a desktop application uses with custom HTML and CSS.

In this example, we are going to use the following markup:

<div id="title-bar">
    <div id="title">
        <span style="vertical-align: middle;">
            <img src="https://raw.githubusercontent.com/zeke/atom-icon/master/old-icon/2.png" style="width:20px;height:20px;"/>
        </span>
        Our Code World Frameless (But draggable,resizable and closable Window)
    </div>
     <div id="title-bar-btns">
          <button id="min-btn">-</button>
          <button id="max-btn">+</button>
          <button id="close-btn">x</button>
     </div>
</div>

And some style to make it look "good":

body {
    padding: 0px;
    margin: 0px;
}

#title-bar {
    -webkit-app-region: drag;
    height: 40px;
    text-align: center;
    line-height: 40px;
    vertical-align: middle;
    background-color: #03a9f4;
    padding: none;
    margin: 0px;
}

#title {
    position: fixed;
    top: 0px;
    left: 6px;
    color:white;

}

#title-bar-btns {
    -webkit-app-region: no-drag;
    position: fixed;
    top: 0px;
    right: 6px;
}

Note that the title-bar class has the class that makes possible to drag the window around the screen, otherwise your user will be forced to work with your app in a static position in the screen (thing you probably don't want). -webkit-app-region: drag; will make the selected element a point to drag the entire window around the screen in the same way that the original title bar does.

The final implementation in your index.html file should look like:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My Electron Frameless Window</title>
        <style>
            body {
                padding: 0px;
                margin: 0px;
            }

            #title-bar {
                -webkit-app-region: drag;
                height: 40px;
                text-align: center;
                line-height: 40px;
                vertical-align: middle;
                background-color: #03a9f4;
                padding: none;
                margin: 0px;
            }

            #title {
                position: fixed;
                top: 0px;
                left: 6px;
                color:white;

            }

            #title-bar-btns {
                -webkit-app-region: no-drag;
                position: fixed;
                top: 0px;
                right: 6px;
            }
        </style>
    </head>
    <body>
        <div id="title-bar">
             <div id="title">
                 <span style="vertical-align: middle;"><img src="https://raw.githubusercontent.com/zeke/atom-icon/master/old-icon/2.png" style="width:20px;height:20px;"/></span>
                 Our Code World Frameless (But draggable,resizable and closable Window)
             </div>
             <div id="title-bar-btns">
                  <button id="min-btn">-</button>
                  <button id="max-btn">+</button>
                  <button id="close-btn">x</button>
             </div>
        </div>
        <div style="text-align:center;">
            <h4>Electron rocks!</h4>
            <img src="http://ourcodeworld.com/resources/img/ocw-empty.png" width="300" height="300"/>
        </div>

        <script>
        (function () {
            // Retrieve remote BrowserWindow
            const {BrowserWindow} = require('electron').remote

            function init() {
                // Minimize task
                document.getElementById("min-btn").addEventListener("click", (e) => {
                    var window = BrowserWindow.getFocusedWindow();
                    window.minimize();
                });

                // Maximize window
                document.getElementById("max-btn").addEventListener("click", (e) => {
                    var window = BrowserWindow.getFocusedWindow();
                    if(window.isMaximized()){
                        window.unmaximize();
                    }else{
                        window.maximize();
                    }
                });

                // Close app
                document.getElementById("close-btn").addEventListener("click", (e) => {
                    var window = BrowserWindow.getFocusedWindow();
                    window.close();
                });
            };

            document.onreadystatechange =  () => {
                if (document.readyState == "complete") {
                    init();
                }
            };
        })();
        </script>
    </body>
</html>

And the result app will look like: