{"id":14544,"library":"electron","title":"Electron","description":"Electron is an open-source framework developed by GitHub for building cross-platform desktop applications using web technologies like JavaScript, HTML, and CSS. It embeds Chromium and Node.js into a single runtime, allowing developers to create applications that run on Windows, macOS, and Linux from a single codebase. The current stable version is 41.2.1, with frequent patch and minor updates and a steady stream of beta releases (currently v42.0.0-beta.4) indicating an active and rapid development cycle. Key differentiators include its ability to leverage existing web development skills for desktop app creation, a large ecosystem of tools and libraries, and strong community support, making it a popular choice for apps requiring native system access and rich UI capabilities.","status":"active","version":"41.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/electron/electron","tags":["javascript","electron","typescript"],"install":[{"cmd":"npm install electron","lang":"bash","label":"npm"},{"cmd":"yarn add electron","lang":"bash","label":"yarn"},{"cmd":"pnpm add electron","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"While CommonJS `require` is still widely used in the main process, ESM `import` is increasingly preferred for modern Electron development, especially in type-aware environments. Both work in the main process.","wrong":"const { app, BrowserWindow } = require('electron')","symbol":"app","correct":"import { app, BrowserWindow } from 'electron'"},{"note":"`BrowserWindow` is a named export, not a default export. Always destructure it.","wrong":"import BrowserWindow from 'electron'","symbol":"BrowserWindow","correct":"import { BrowserWindow } from 'electron'"},{"note":"`ipcRenderer` is typically imported in the renderer process or preload scripts to communicate with the main process. Ensure `contextIsolation` is properly configured for security.","symbol":"ipcRenderer","correct":"import { ipcRenderer } from 'electron'"},{"note":"`globalShortcut` is available only in the main process for registering system-wide keyboard shortcuts.","symbol":"globalShortcut","correct":"import { globalShortcut } from 'electron'"}],"quickstart":{"code":"import { app, BrowserWindow } from 'electron';\nimport path from 'path';\n\nconst createWindow = () => {\n  const mainWindow = new BrowserWindow({\n    width: 800,\n    height: 600,\n    webPreferences: {\n      preload: path.join(__dirname, 'preload.js'),\n      nodeIntegration: false, // Strongly recommended to be false for security\n      contextIsolation: true // Strongly recommended to be true for security\n    }\n  });\n\n  mainWindow.loadFile('index.html');\n  // Open the DevTools.\n  // mainWindow.webContents.openDevTools();\n};\n\napp.whenReady().then(() => {\n  createWindow();\n\n  app.on('activate', () => {\n    if (BrowserWindow.getAllWindows().length === 0) createWindow();\n  });\n});\n\napp.on('window-all-closed', () => {\n  if (process.platform !== 'darwin') app.quit();\n});\n","lang":"typescript","description":"This quickstart initializes an Electron application, creates a main window, loads an HTML file, and sets up basic lifecycle events. It emphasizes best practices for `webPreferences` like `nodeIntegration: false` and `contextIsolation: true` for enhanced security."},"warnings":[{"fix":"Review the official Electron release notes and migration guides for your target major version. Pay close attention to changes in `webPreferences` and security defaults.","message":"Electron's core APIs (like `BrowserWindow`, `Menu`, etc.) often have breaking changes between major versions due to Chromium and Node.js updates, or refactoring for security and stability. Always consult the migration guide for each major version upgrade.","severity":"breaking","affected_versions":">=30.0"},{"fix":"Explicitly set `nodeIntegration: false` and `contextIsolation: true` in your `BrowserWindow`'s `webPreferences` for all new projects and consider migrating existing ones. Use preload scripts and IPC for communication between renderer and main processes.","message":"The default values for `nodeIntegration` and `contextIsolation` in `webPreferences` have changed over time and are now `false` and `true` respectively by default. Disabling `nodeIntegration` and enabling `contextIsolation` is a critical security hardening measure.","severity":"breaking","affected_versions":">=12.0"},{"fix":"Migrate away from the `remote` module. Instead, use secure patterns like IPC (Inter-Process Communication) via `ipcRenderer` and `ipcMain`, often facilitated by a sandboxed preload script, to expose necessary main process functionalities to the renderer.","message":"Electron's `remote` module was deprecated and eventually removed to improve security and maintainability. Direct access to main process modules from the renderer process is no longer supported.","severity":"gotcha","affected_versions":">=14.0"},{"fix":"Regularly check the official Electron documentation and release notes. Monitor your application's console for deprecation warnings during development and testing, and update your code accordingly.","message":"Many Electron APIs, especially those related to deprecated Chromium features or security vulnerabilities, may become deprecated or removed without a full major version bump, typically with a warning in the console.","severity":"deprecated","affected_versions":">=30.0"},{"fix":"Use official tools like `electron-builder` or `electron-packager`. Ensure native modules are rebuilt for Electron's specific Node.js version and architecture. Test builds thoroughly on all target platforms.","message":"Packaging and distributing Electron applications can be complex, especially with native modules. Misconfiguration of `electron-builder` or `electron-packager` can lead to broken builds or platform-specific issues.","severity":"gotcha","affected_versions":">=1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"For an ESM module, use `import()` dynamically or ensure your main process entry file is an ES Module (e.g., `\"type\": \"module\"` in `package.json` and use `.mjs` extension) to use top-level `import` statements. Or, find a CommonJS compatible version of the dependency.","cause":"Attempting to `require()` an ES Module (ESM) in a CommonJS context, typically in the main process.","error":"Error: require() of ES Module ... not supported. Instead change the require of ... to a dynamic import()"},{"fix":"Access Node.js APIs and other main process functionalities securely via a preload script with `contextIsolation: true`. Expose necessary functions from the preload script to the renderer's `window` object, or use `ipcRenderer` to communicate with the main process.","cause":"Attempting to use `require()` in a renderer process where `nodeIntegration` is `false` (which is the secure default).","error":"Uncaught ReferenceError: require is not defined"},{"fix":"Ensure `contextIsolation: true` is set in `webPreferences`. In your `preload.js` script, use `contextBridge.exposeInMainWorld` to selectively expose an API to the renderer process, which then uses `window.myAPI.send(...)` or `window.myAPI.invoke(...)`.","cause":"Trying to use `ipcRenderer.send` or `ipcRenderer.invoke` in the renderer process, but the `ipcRenderer` object is not available or properly exposed due to `contextIsolation`.","error":"Cannot read properties of undefined (reading 'send') or 'invoke')"}],"ecosystem":"npm"}