Electron JS: How to Create a Beautiful Frameless Window

Step 1: Configure our BrowserWindow options

Take a look at this code where we define our main BrowserWindow named ‘win’ . More precisely, notice the options object passed into the new BrowserWindow instance:

const electron = require('electron');const {app, BrowserWindow, ipcMain} = electron;let win;// Listen for ready appapp.on('ready',function(){    // create new window    win = new BrowserWindow(            {                width: 430,                height:600,                frame:false,                resizable:false,                maximizable:false,                transparent:true,                webPreferences:{nodeIntegration:true},                title: 'Frameless Window App'            }        );    win.loadURL(`file://${__dirname}/index.html`);});

Step 2: Adding custom exit button

Now, whether or not you want to implement your own custom nav menu, something we are definitely going to need is a button that will allow us to exit our app. On the JavaScript code pertaining to our Renderer window, we can add an event listener our exit button.

document.querySelector('#exit-btn').addEventListener("click",          function (e) {    // send away!});
document.querySelector('#exit-btn').addEventListener("click",    function (e) {        // send away!        ipcRenderer.send('close-me');});
// Activate custom close buttonipcMain.on('close-me', (evt, arg) => {    // close our app!

Step 3: Styling

Usually we can drag a window by clicking on the menu. However, by implementing a frameless window we are removing our menu — and by removing our menu we essentially removed our ability to drag the window. So, what we need to do is define a region of our window that we want to be draggable. We can do this with CSS by selecting the element we want to be draggable and by adding ‘-webkit-app-region:drag’,

#my-header{    -webkit-app-region:drag;    text-align: center;}
h1,h2,p{ user-select: none;}

Bonus: Rounded window frame

Another nice little trick you can do to make your app stand out is round out those corner and add some nice shadows and highlights to it.

<body>    <div class="container">        <div class="content">            <h1>Frameless Window App</h1>        </div>    </div></body>
.container{    transform: scale(0.94);    overflow: hidden;}
.container{    background-color:#023061;    transform: scale(0.94);    border-radius: 10px;    overflow: hidden;}
box-shadow: inset 0px -1px 10px 1px #0000002e;
Bottom right corner

Software Developer & Armchair Philosopher

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store