What’s New in Electron 12 & 13? Key Features, APIs, and Code Samples

The latest stable Electron release is 13‑x‑y; it brings Node.js 14.16.0 and V8 9.1 while adding several framework‑level features.

Electron 13 Features

Notable Additions

When creating BrowserWindow instances you can now use the roundedCorners option to keep corners square in frameless windows, useful for tray or small‑window scenarios.

The session module gained a storagePath property, allowing named sessions (e.g., using fromPartition('persist:abc')) to store caches such as code cache and local storage in a dedicated folder.

Some plugin APIs moved from BrowserWindow to session, e.g., sess.loadExtension and sess.getAllExtensions().

Dark‑mode related APIs moved to nativeTheme, e.g., nativeTheme.shouldUseDarkColors.

Node.js Highlights

Node.js is now 14.16.0. The fs module supports a promise API, eliminating the need for util.promisify. Example:

import fs, { promises as fsPromises, PathLike } from 'fs';
export async function ensureDir(dirPath: PathLike) {
  try {
    await fsPromises.mkdir(dirPath, { recursive: true });
  } catch (error) {
    if (error.code !== 'EEXIST') {
      throw error;
    }
  }
}

Additionally, fs.rm and fs.rmSync were added (Node 14.14.0) to delete files or directories conveniently.

V8 New Features

Top‑level await is supported.

await fetch('https://example.com');

Private class fields using #var syntax are now standard.

class A {
  static test(obj) {
    console.log(#foo in obj);
  }
  #foo = 0;
}
A.test(new A()); // true
A.test({}); // false

Electron 12 Features

net.isOnline Method

The new net.isOnline() API reports the network status without creating a BrowserWindow. It mirrors navigator.onLine but is implemented in Chromium.

Context Bridge Isolation

With contextIsolation: true, you can expose variables or functions to the renderer via contextBridge.exposeInMainWorld:

// main.ts
const mainWindow = new BrowserWindow({
  height: 600,
  width: 800,
  webPreferences: { contextIsolation: true, preload: path.join(__dirname, './preload.js') },
});

// preload.ts (isolated world)
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electron', {
  doThing: () => ipcRenderer.send('do-a-thing')
});

After loading, the renderer can call window.electron.doThing(), while plain globals like window.hello remain inaccessible.

WebContents New API: webFrameMain

The webFrameMain property on the main‑process WebContents lets you locate and control frames from the main process, complementing the existing webFrame used in the renderer.

const { BrowserWindow } = require('electron');
async function main() {
  const win = new BrowserWindow({ width: 800, height: 600 });
  await win.loadURL('https://reddit.com');
  const youtubeEmbeds = win.webContents.mainFrame.frames.filter(frame => {
    try {
      const url = new URL(frame.url);
      return url.host === 'www.youtube.com';
    } catch {
      return false;
    }
  });
  console.log(youtubeEmbeds);
}
main();

MenuItem Share Menu

Electron 12 adds a macOS share menu role:

const menu = Menu.buildFromTemplate([
  { role: 'windowMenu' },
  { role: 'shareMenu', sharingItem: { urls: ['https://github.com/electron/electron/issues/6330'] } },
]);
menu.popup(win);

You can also create a ShareMenu directly:

const menu2 = new ShareMenu({ filePaths: [__filename] });
menu2.popup(win);

Async Trash via shell.trashItem()

The synchronous shell.moveItemToTrash() is deprecated. Tests show asynchronous shell.trashItem() is far faster (≈0.15 ms vs ≈500 ms) and prevents the whole app from freezing.

Earlier Electron 8.x/9.x also migrated shell.openExternal to an async version without changing its name.

Spellcheck Module Updates

New methods webFrame.isWordMisspelled(word) and webFrame.getWordSuggestions(word) allow built‑in spellchecking without third‑party libraries.

net Module New Properties

credentials

is now accepted in new ClientRequest(options), matching the Fetch spec. useSessionCookies added to ClientRequest to forward the current session’s cookies.

const sess = session.defaultSession;
const [cookie] = await sess.cookies.get({ name: 'SessionId' });
if (cookie && cookie.expirationDate) {
  console.log('cookie expiration date', cookie.expirationDate);
}

Breaking Changes

Remote Module Disabled

Use the separate @electron/remote package instead of the built‑in remote module.

Default Context Isolation

Both contextIsolation and worldSafeExecuteJavaScript now default to true, tightening security.

Flash Support Removed

Flash is no longer bundled.

Other Notes

Support for Electron 9.x and 10.x has ended (see the official timeline).

Full release notes are available on the Electron stable releases page.

Across the 12‑to‑13 upgrade path, Electron has steadily improved security, adding extensive isolation APIs (contextBridge, session handling, contextIsolation) and updating Node.js with many safety fixes, while the core framework itself introduces fewer but well‑targeted enhancements.