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`);});
frame:false
resizable:false
transparent:true,

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!
app.quit();
});

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.

transparent:true,
<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;}
.content{
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