Transparent windows

Given that we are working on the screenshot snipping tool, it is vital to be able to select an area of the screen to create a screenshot. Traditionally, such tools offer a transparent and resizable window so that users can imagine the result more clearly.

You can enable window transparency by using the transparent property like so:

function createWindow() {  win = new BrowserWindow({    transparent: true,    frame: false  });  win.loadURL(`http://localhost:3000`);  win.on('closed', () => {    win = null;  });}
Please note that transparency mode has its own platform-specific limitations. You can find all the details here: https://electronjs.org/docs/api/frameless-window#limitations.

However, if you try to run your application right ...

Get Electron Projects now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.