electron

name	electron
description	Build cross-platform desktop apps with JavaScript, HTML, and CSS. Use when building or maintaining Electron apps, configuring IPC/security, or packaging and distributing.
metadata	{"author":"hairy","version":"2026.1.30","source":"Generated from https://github.com/electron/electron, scripts located at https://github.com/antfu/skills"}

Electron embeds Chromium and Node.js so you can ship one JavaScript codebase for Windows, macOS, and Linux. Use these skills when scaffolding projects, wiring main/renderer IPC, configuring security and packaging, or integrating native modules and auto-updates.

The skill is based on Electron (latest), generated at 2026-01-30.

Core References

Topic	Description	Reference
Process Model	Main, renderer, preload, utility process; when to use each	core-process-model
IPC	Renderer↔main patterns (send, invoke, main→renderer), serialization	core-ipc
Context Isolation	contextBridge, exposing safe APIs from preload	core-context-isolation
Sandbox	Process sandboxing, preload polyfill, when it is disabled	core-sandbox

Develop

Topic	Description	Reference
Accessibility	setAccessibilitySupportEnabled, assistive tech, AXManualAccessibility	develop-accessibility
App Lifecycle	whenReady, window-all-closed, quit, single instance lock	develop-app-lifecycle
BaseWindow	Multi-view windows; contentView, View, addChildView; parent/modal	develop-base-window
BrowserWindow	Creating windows, loadURL/loadFile, ready-to-show, webPreferences	develop-browser-window
Clipboard	readText/writeText, readHTML/writeHTML; use from preload	develop-clipboard
Cookies	session.cookies; get, set, remove, flushStore; changed event	develop-cookies
Command Line	app.commandLine, appendSwitch, hasSwitch; Electron/Node/Chromium flags	develop-command-line
Context Menu	Right-click menu; webContents context-menu, Menu.popup	develop-context-menu
contentTracing	Chromium tracing; startRecording, stopRecording; chrome://tracing	develop-content-tracing
Crash Reporter	crashReporter.start, submitURL, extra; call before ready	develop-crash-reporter
Debug	Renderer DevTools, main process (--inspect, Chrome/VSCode)	develop-debug
Debugger (CDP)	webContents.debugger; attach, detach, sendCommand; DevTools Protocol	develop-debugger
DevTools Extension	loadExtension, removeExtension; electron-devtools-installer	develop-devtools-extension
Dialog	showOpenDialog, showSaveDialog, showMessageBox; expose via IPC	develop-dialog
Dock	macOS Dock; bounce, badge, icon, menu, hide/show	develop-dock
Downloads	will-download, DownloadItem, setSavePath, preventDefault	develop-downloads
Keyboard Shortcuts	Accelerators, local (MenuItem), global (globalShortcut)	develop-keyboard-shortcuts
Linux Desktop Actions	.desktop file Actions; launcher shortcuts; process.argv	develop-linux-desktop-actions
Menus and Tray	Application/context/tray/dock menus; Tray icon and context menu	develop-menus-tray
Native Image	createFromPath, createFromBuffer, template image; tray, icon	develop-native-image
Native Modules	Using native Node addons; @electron/rebuild, node-gyp	develop-native-modules
Net	net.fetch, net.request; HTTP from main (Chromium stack)	develop-net
netLog	Session network logging; startLogging, stopLogging, captureMode	develop-net-log
Drag and Drop	Native file drag out; webContents.startDrag, IPC	develop-drag-drop
ESM	ES modules in main and preload; .mjs, caveats	develop-esm
Multithreading	Web Workers, nodeIntegrationInWorker; no Electron in workers	develop-multithreading
Navigation History	webContents.navigationHistory, goBack, goForward, getAllEntries	develop-navigation-history
Offscreen Rendering	paint event, NativeImage; GPU vs software; setFrameRate	develop-offscreen-rendering
parentPort	Utility process child; process.parentPort message/postMessage	develop-parent-port
Power Monitor	suspend, resume, battery/AC, thermal-state-change, shutdown	develop-power-monitor
Power Save Blocker	powerSaveBlocker; prevent display/app sleep; start/stop by id	develop-power-save-blocker
Progress Bar	setProgressBar (taskbar/dock); 0–1, indeterminate	develop-progress-bar
Protocol	Custom protocol (protocol.handle), registerSchemesAsPrivileged	develop-protocol
Recent Documents	addRecentDocument, clearRecentDocuments; JumpList, Dock	develop-recent-documents
Safe Storage	encryptString, decryptString; OS keychain	develop-safe-storage
Screen	getPrimaryDisplay, getAllDisplays, workAreaSize, display events	develop-screen
Session	partition, defaultSession, permissionRequestHandler, cookies	develop-session
Share Menu	macOS ShareMenu; share to apps/social; popup, shareMenu role	develop-share-menu
Shell	openExternal, openPath, showItemInFolder, trashItem; security	develop-shell
Process	process.type, process.versions, process.platform, process.mas	develop-process
Environment Variables	ELECTRON_*, NODE_OPTIONS; fuses	develop-environment-variables
Represented File	setRepresentedFilename, setDocumentEdited (macOS title bar)	develop-represented-file
System Preferences	getEffectiveAppearance, getColor, getMediaAccessStatus	develop-system-preferences
Touch Bar	macOS TouchBar; items (Button, Label, Slider, etc.), setTouchBar	develop-touch-bar
Tests	WebDriver/WebdriverIO E2E, headless CI	develop-tests
Utility Process	utilityProcess.fork, postMessage, MessagePortMain	develop-utility-process
Web Request	onBeforeRequest, onHeadersReceived, filter; set CSP	develop-web-request
webContents Navigation	will-navigate, setWindowOpenHandler, load events	develop-webcontents-navigation
webFrame	Renderer zoom, insertCSS, executeJavaScript, spell check, frame tree	develop-web-frame
webFrameMain	Main process frame control; fromId/fromFrameToken, executeJavaScript, IPC	develop-web-frame-main
webUtils	Renderer getPathForFile(File); file input path; expose via preload	develop-web-utils
Window Customization	Frameless, transparent, custom title bar	develop-window-customization
Windows Taskbar	JumpList, setThumbarButtons, setOverlayIcon, flashFrame	develop-windows-taskbar

Best Practices

Topic	Description	Reference
Performance	Measure first, defer loading, avoid blocking, bundle	best-practices-performance
Security	Content loading, webPreferences, CSP, IPC validation, distribution	best-practices-security
Versioning	SemVer, ~ vs ^, stabilization branches, upgrade and EOL	best-practices-versioning

Features

Topic	Description	Reference
ASAR	Pack/unpack, Node and Web API usage, unpack option, integrity	features-asar
Corner Smoothing	-electron-corner-smoothing CSS; smooth rounded corners; system-ui	features-corner-smoothing
Dark Mode	nativeTheme, themeSource, prefers-color-scheme	features-dark-mode
Desktop Capture	desktopCapturer, setDisplayMediaRequestHandler, getDisplayMedia	features-desktop-capture
Fuses	runAsNode, nodeCliInspect, asar integrity; @electron/fuses	features-fuses
In-App Purchase	Mac App Store IAP; purchaseProduct, getProducts, transactions-updated	features-in-app-purchase
MessagePorts	Renderer-to-renderer and main-renderer messaging; MessagePortMain	features-message-ports
Notifications	Main (Notification), renderer (Web Notifications API)	features-notifications
Online/Offline	net.isOnline(), net.online; navigator.onLine, online/offline events	features-online-offline
Push Notifications	APNS (macOS); registerForAPNSNotifications, received-apns-notification	features-push-notifications
Service Workers	session.serviceWorkers; getAllRunning, main↔SW IPC (IpcMainServiceWorker)	features-service-workers
Spellchecker	Enable, setSpellCheckerLanguages, context menu, dictionary URL	features-spellchecker
Updates	autoUpdater, Squirrel, publishing release metadata	features-updates
Web Embeds	iframe, WebContentsView, webview tag; when to use each	features-web-embeds

Distribute

Topic	Description	Reference
Code Signing	macOS sign + notarize; Windows Authenticode	distribute-code-signing
Mac App Store	MAS build, Apple Distribution, sandbox, limitations	distribute-mac-app-store
Packaging	Tooling (Forge), manual layout, asar, rebranding	distribute-packaging
Windows Store	AppX/MSIX, electron-windows-store, process.windowsStore	distribute-windows-store