Training Example: Electron – Review the Data, Give Your Score & Compare to the Real AI Evaluation

[H3] Powered by the web
Electron embeds Chromium and Node.js to bring JavaScript to the desktop.
[H3] Cross-platform
Electron apps run natively on macOS, Windows, and Linux across all supported architectures.
[H3] Open to all
Electron is an open-source project under the OpenJS Foundation maintained by an active community of contributors.
[H3] Stable
Electron's bundled Chromium build ensures that your app has a stable rendering target with all the newest web platform features.
[H3] Secure
Electron releases major versions in lockstep with Chromium so you get security fixes as soon as they are available.
[H3] Extensible
Use any package from the rich npm ecosystem, or write your own native add-on code to extend Electron.
[H2] Trusted by best-in-class apps
Popular consumer and rock-solid enterprise apps use Electron to power their desktop experiences.
[IMG: 1Password logo]
[IMG: OpenAI ChatGPT logo]
[IMG: Slack logo]
[IMG: Anthropic Claude logo]
[IMG: Visual Studio Code logo]
[IMG: Figma logo]
[IMG: 1Password logo]
[IMG: OpenAI ChatGPT logo]
[IMG: Slack logo]
[IMG: Anthropic Claude logo]
[IMG: Visual Studio Code logo]
[IMG: Figma logo]
[H2] Desktop development made easy
Electron takes care of the hard parts so you can focus on the core of your application.
[IMG: macOS operating system menu for VSCode.]
[H3] Native graphical user interfaces
Interact with your operating system's interfaces with Electron's main process APIs. Customize your application window appearance, control application menus, or alert users through dialogs or notifications.
[IMG: Dialog for Electron Fiddle]
[H3] Automatic software updates
Send out software updates to your macOS and Windows users whenever you release a new version with Electron's autoUpdater module, powered by Squirrel.
[IMG: Window on macOS for the WhatsApp Installer (DMG). Two icons are present:]
[H3] Application installers
Use community-supported tooling to generate platform-specific tooling like Apple Disk Image (.dmg) on macOS, Windows Installer (.msi) on Windows, or RPM Package Manager (.rpm) on Linux.
[IMG: Mac App Store window open to the Rocket.Chat download page.]
[H3] App store distribution
Distribute your application to more users. Electron has first-class support for the Mac App Store (macOS), the Microsoft Store (Windows), or the Snap Store (Linux).
[IMG: Screenshot of Sentry crash reporting (https://sentry.io). Shows the error message (]
[H3] Crash reporting
Automatically collect JavaScript and native crash data from your users with the crashReporter module. Use a third-party service to collect this data or set up your own on-premise Crashpad server.
[H2] Use the tools you love
With the power of modern Chromium, Electron gives you an unopinionated blank slate to build your app. Choose to integrate your favourite libraries and frameworks from the front-end ecosystem, or carve your own path with bespoke HTML code.ReactVue.jsNext.jsTailwind CSSBootstrapThree.jsAngularTypeScriptwebpackPlaywrightTesting LibrarySass
[H2] Electron Forge
Electron Forge is a batteries-included toolkit for building and publishing Electron apps. Get your Electron app started the right way with first-class support for JavaScript bundling and an extensible module ecosystem.Get startedSource code$ npm init electron-app@latest my-app✔ Locating custom template: "base"✔ Initializing directory✔ Preparing template✔ Initializing template✔ Installing template dependenciesDirect download
[H2] Installation
If you want to figure things out for yourself, you can install the Electron package directly from the npm registry.For a production-ready experience, install the latest stable version. If you want something a bit more experimental, try the prerelease or nightly channels.StablePrereleaseNightly$ npm install --save-dev electron@latest# Electron 42.3.0# Node 24.15.0# Chromium 148.0.7778.180Experiment with the API
[H2] Electron Fiddle
Electron Fiddle lets you create and play with small Electron experiments. It greets you with a quick-start template after opening — change a few things, choose the version of Electron you want to run it with, and play around.Save your Fiddle either as a GitHub Gist or to a local folder. Once pushed to GitHub, anyone can quickly try your Fiddle out by just entering it in the address bar.DownloadSource code
[IMG: Screenshot of Electron Fiddle]
[H2] Apps users love, built with Electron
Thousands of organizations spanning all industries use Electron to build cross-platform software.1PasswordAsanaClaudeDiscordDropboxFigmaLoomGitHub DesktopitchMongoDB CompassNotionObsidianOOMOL StudioPolypanePostmanSignalSlackSpliceScreen StudioTrelloTwitchVS CodeSee more

On this page
Electron is a framework for building desktop applications using JavaScript,
HTML, and CSS. By embedding Chromium and Node.js into its
binary, Electron allows you to maintain one JavaScript codebase and create
cross-platform apps that work on Windows, macOS, and Linux — no native development
experience required.
[H2] Getting started​
We recommend you to start with the tutorial, which guides you through the
process of developing an Electron app and distributing it to users.
The examples and API documentation are also good places to browse around
and discover new things.
[H2] Running examples with Electron Fiddle​
Electron Fiddle is a sandbox app written with Electron and supported by
Electron's maintainers. We highly recommend installing it as a learning tool to
experiment with Electron's APIs or to prototype features during development.
Fiddle also integrates nicely with our documentation. When browsing through examples
in our tutorials, you'll frequently see an "Open in Electron Fiddle" button underneath
a code block. If you have Fiddle installed, this button will open a
fiddle.electronjs.org link that will automatically load the example into Fiddle,
no copy-pasting required.
docs/fiddles/quick-start (42.3.0)Open in Fiddlemain.jspreload.jsindex.htmlconst { app, BrowserWindow } = require('electron/main')const path = require('node:path')function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) win.loadFile('index.html')}app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } })})app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() }})window.addEventListener('DOMContentLoaded', () => { const replaceText = (selector, text) => { const element =

Electron Fiddle lets you create and play with small Electron experiments. It greets you with a runnable quick start template — change a few things, choose the version of Electron you want to run it with, and play around. Then, save your fiddle locally or as a GitHub Gist. Once uploaded to GitHub, anyone can try your fiddle out by just entering the Gist URL in the address bar.
[H2] Explore Electron
Try Electron without installing any dependencies: Fiddle includes everything you'll need to explore the platform. It also includes examples for every API available in Electron, so if you want to quickly see what a BrowserWindow is or how the desktopCapturer works, Fiddle has got you covered.
[H2] Use npm packages
If your experiment depends on third-party modules, you can search for any package available in the npm registry, with autocomplete and version selection powered by Algolia.
[H2] Code with types
Fiddle is built on Microsoft's excellent Monaco Editor, the same editor powering VS Code. It also installs the type definitions for the currently selected version of Electron automatically, ensuring that you always have all Electron APIs only a few keystrokes away.
[H2] Compile and package
Fiddle can automatically turn your experiment into binaries you can share with your friends, coworkers, or grandparents. It does so thanks to Electron Forge, allowing you to package your fiddle as an app for Windows, macOS, or Linux.
[H2] Start with Fiddle, continue wherever
Fiddle is not an IDE. However, it is an excellent starting point. Once your fiddle has grown up, export it as a project with or without Electron Forge. Then, use your favorite editor and take on the world!
[H2] Downloads
[H3] Windows
Installer x64ia32
[H3] macOS
.zip arm64x64
[H3] Linux
.deb x64arm64armv7l.rpm x64arm64armv7l.AppImage x64arm64armv7lGitHub

On this page
Control your application's event lifecycle.
Process: Main
The following example shows how to quit the application when the last window is
closed:
const { app } = require('electron')app.on('window-all-closed', () => { app.quit()})
[H2] Events​
The app object emits the following events:
[H3] Event: 'will-finish-launching'​
Emitted when the application has finished basic startup. On Windows and Linux,
the will-finish-launching event is the same as the ready event; on macOS,
this event represents the applicationWillFinishLaunching notification of
NSApplication.
In most cases, you should do everything in the ready event handler.
[H3] Event: 'ready'​
Returns:
event Event
launchInfo Record<string, any> | NotificationResponse macOS
Emitted once, when Electron has finished initializing. On macOS, launchInfo
holds the userInfo of the NSUserNotification
or information from UNNotificationResponse
that was used to open the application, if it was launched from Notification Center.
You can also call app.isReady() to check if this event has already fired and app.whenReady()
to get a Promise that is fulfilled when Electron is initialized.
noteThe ready event is only fired after the main process has finished running the first
tick of the event loop. If an Electron API needs to be called before the ready event, ensure
that it is called synchronously in the top-level context of the main process.
[H3] Event: 'window-all-closed'​
Emitted when all windows have been closed.
If you do not subscribe to this event and all windows are closed, the default
behavior is to quit the app; however, if you subscribe, you control whether the
app quits or not. If the user pressed Cmd + Q, or the developer called
app.quit(), Electron will first try to close all the windows and then emit the
will-quit event, and in this case the window-all-closed event would not be
emitted.
[H3] Event: 'before-quit'​
Returns:
event Event
Emitted before the application starts closing its windows.
Calling event.preventDefault() will prevent the default behavior, which is
terminating the application.
noteIf application quit was initiated by autoUpdater.quitAndInstall(),
then before-quit is emitted after emitting close event on all windows and
closing them.
noteOn Windows, this event will not be emitted if the app is closed due
to a shutdown/restart of the system or a user logout.
[H3] Event: 'will-quit'​
Returns:
event Event
Emitted when all windows have been closed and the application will quit.
Calling event.preventDefault() will prevent the default behavior, which is
terminating the application.
See the description of the window-all-closed event for the differences between
the will-quit and window-all-closed events.
noteOn Windows, this event will not be emitted if the app is closed due
to a shutdown/restart of the system or a user logout.
[H3] Event: 'quit'​
Returns:
event Event
exitCode Integer
Emitted when the application is quitting.
noteOn Windows, this event will not be emitted if the app is closed due
to a shutdown/restart of the system or a user logout.
[H3] Event: 'open-file' macOS​
Returns:
event Event
path string
Emitted when the user wants to open a file with the application. The open-file
event is usually emitted when the application is already open and the OS wants
to reuse the application to open the file. open-file is also emitted when a
file is dropped onto the dock and the application is not yet running. Make sure
to listen for the open-file event very early in your application startup to
handle this case (even before the ready event is emitted).
You should call event.preventDefault() if you want to handle this event.
On Windows, you have to parse process.argv (in the main process) to get the
filepath.
[H3] Event: 'open-url' macOS​
Returns:
event Event
url string
Emitted when the user wants to open a URL with the application. Your application's
Info.plist file must define the URL scheme within the CFBundleURLTypes key, and
set NSPrincipalClass to AtomApplication.
As with the open-file event, be sure to register a listener for the open-url
event early in your application startup to detect if the application is being opened to handle a URL.
If you register the listener in response to a ready event, you'll miss URLs that trigger the launch of your application.
[H3] Event: 'activate' macOS​
Returns:
event Event
hasVisibleWindows boolean
Emitted when the application is activated. Various actions can trigger
this event, such as launching the application for the first time, attempting
to re-launch the application when it's already running, or clicking on the
application's dock or taskbar icon.
[H3] Event: 'did-become-active' macOS​
Returns:
event Event
Emitted when the application becomes active. This differs from the activate event in
that did-become-active is emitted every time the app becomes active, not only
when Dock icon is clicked or application is re-launched. It is also emitted when a user
switches to the app via the macOS App Switcher.
[H3] Event: 'did-resign-active' macOS​
Returns:
event Event
Emitted when the app is no longer active and doesn’t have focus. This can be triggered,
for example, by clicking on another application or by using the macOS App Switcher to
switch to another application.
[H3] Event: 'continue-activity' macOS​
Returns:
event Event
type string - A string identifying the activity. Maps to
NSUserActivity.activityType.
userInfo unknown - Contains app-specific state stored by the activity on
another device.
details Object
webpageURL string (optional) - A string identifying the URL of the webpage accessed by the activity on another device, if available.
Emitted during Handoff when an activity from a different device wants
to be resumed. You should call event.preventDefault() if you want to handle
this event.
A user activity can be continued only in an app that has the same developer Team
ID as the activity's source app and that supports the activity's type.
Supported activity types are specified in the app's Info.plist under the
NSUserActivityTypes key.
[H3] Event: 'will-continue-activity' macOS​
Returns:
event Event
type string - A string identifying the activity. Maps to
NSUserActivity.activityType.
Emitted during Handoff before an activity from a different device wants
to be resumed. You should call event.preventDefault() if you want to handle
this event.
[H3] Event: 'continue-activity-error' macOS​
Returns:
event Event
type string - A string identifying the activity. Maps to
NSUserActivity.activityType.
error string - A string with the error's localized description.
Emitted during Handoff when an activity from a different device
fails to be resumed.
[H3] Event: 'activity-was-continued' macOS​
Returns:
event Event
type string - A string identifying the activity. Maps to
NSUserActivity.activityType.
userInfo unknown - Contains app-specific state stored by the activity.
Emitted during Handoff after an activity from this device was successfully
resumed on another one.
[H3] Event: 'update-activity-state' macOS​
Returns:
event Event
type string - A string identifying the activity. Maps to
NSUserActivity.activityType.
userInfo unknown - Contains app-specific state stored by the activity.
Emitted when Handoff is about to be resumed on another device. If you need to update the state to be transferred, you should call event.preventDefault() immediately, construct a new userInfo dictionary and call app.updateCurrentActivity() in a timely manner. Otherwise, the operation will fail and continue-activity-error will be called.
[H3] Event: 'new-window-for-tab' macOS​
Returns:
event Event
Emitted when the user clicks the native macOS new tab button. The new
tab button is only visible if the current BrowserWindow has a
tabbingIdentifier.
You must create a window in this handler in order for macOS tabbing to work as expected.
[H3] Event: 'browser-window-blur'​
Returns:
event Event
window BrowserWindow
Emitted when a browserWindow gets blurred.
[H3] Event: 'browser-window-focus'​
Returns:
event Event
window BrowserWindow
Emitted when a browserWindow gets focused.
[H3] Event: 'browser-window-created'​
Returns:
event Event
window BrowserWindow
Emitted when a new browserWindow is created.
[H3] Event: 'web-contents-created'​
Returns:
event Event
webContents WebContents
Emitted when a new webContents is created.
[H3] Event: 'certificate-error'​
Returns:
event Event
webContents WebContents
url string
error string - The error code
certificate Certificate
callback Function
isTrusted boolean - Whether to consider the certificate as trusted
isMainFrame boolean
Emitted when failed to verify the certificate for url, to trust the
certificate you should prevent the default behavior with
event.preventDefault() and call callback(true).
const { app } = require('electron')app.on('certificate-error', (event, webContents, url, error, certificate, callback) => { if (url === 'https://github.com') { // Verification logic. event.preventDefault() callback(true) } else { callback(false) }})
[H3] Event: 'select-client-certificate'​
Returns:
event Event
webContents WebContents
url URL
certificateList Certificate[]
callback Function
certificate Certificate (optional)
Emitted when a client certificate is requested.
The url corresponds to the navigation entry requesting the client certificate
and callback can be called with an entry filtered from the list. Using
event.preventDefault() prevents the application from using the first
certificate from the store.
const { app } = require('electron')app.on('select-client-certificate', (event, webContents, url, list, callback) => { event.preventDefault() callback(list[0])})
[H3] Event: 'login'​
Returns:
event Event
webContents WebContents (optional)
authenticationResponseDetails Object
url URL
pid number
authInfo Object
isProxy boolean
scheme string
host string
port Integer
realm string
callback Function
username string (optional)
password string (optional)
Emitted when webContents or Utility process wants to do basic auth.
The default behavior is to cancel all authentications. To override this you
should prevent the default behavior with event.preventDefault() and call
callback(username, password) with the credentials.
const { app } = require('electron')app.on('login', (event, webContents, details, authInfo, callback) => { event.preventDefault() callback('username', 'secret')})
If callback is called without a username or password, the authentication
request will be cancelled and the authentication error will be returned to the
page.
[H3] Event: 'gpu-info-update'​
Emitted whenever there is a GPU info update.
[H3] Event: 'render-process-gone'​
Returns:
event Event
webContents WebContents
details RenderProcessGoneDetails
Emitted when the renderer process unexpectedly disappears. This is normally
because it was crashed or killed.
[H3] Event: 'child-process-gone'​
Returns:
event Event
details Object
type string - Process type. One of the following values:
Utility
Zygote
Sandbox helper
GPU
Pepper Plugin
Pepper Plugin Broker
Unknown
reason string - The reason the child process is gone. Possible values:
clean-exit - Process exited with an exit code of zero
abnormal-exit - Process exited with a non-zero exit code
killed - Process was sent a SIGTERM or otherwise killed externally
crashed - Process crashed
oom - Process ran out of memory
launch-failed - Process never successfully launched
integrity-failure - Windows code integrity checks failed
memory-eviction - Process proactively terminated to prevent a future out-of-memory (OOM) situation
exitCode number - The exit code for the process
(e.g. status from waitpid if on POSIX, from GetExitCodeProcess on Windows).
serviceName string (optional) - The non-localized name of the process.
name string (optional) - The name of the process.
Examples for utility: Audio Service, Content Decryption Module Service, Network Service, Video Capture, etc.
Emitted when the child process unexpectedly disappears. This is normally
because it was crashed or killed. It does not include renderer processes.
[H3] Event: 'accessibility-support-changed' macOS Windows​
Returns:
event Event
accessibilitySupportEnabled boolean - true when Chrome's accessibility
support is enabled, false otherwise.
Emitted when Chrome's accessibility support changes. This event fires when
assistive technologies, such as screen readers, are enabled or disabled.
See https://www.chromium.org/developers/design-documents/accessibility for more
details.
[H3] Event: 'session-created'​
Returns:
session Session
Emitted when Electron has created a new session.
const { app } = require('electron')app.on('session-created', (session) => { console.log(session)})
[H3] Event: 'second-instance'​
Returns:
event Event
argv string[] - An array of the second instance's command line arguments
workingDirectory string - The second instance's working directory
additionalData unknown - A JSON object of additional data passed from the second instance
This event will be emitted inside the primary instance of your application
when a second instance has been executed and calls app.requestSingleInstanceLock().
argv is an Array of the second instance's command line arguments,
and workingDirectory is its current working directory. Usually
applications respond to this by making their primary window focused and
non-minimized.
noteargv will not be exactly the same list of arguments as those passed
to the second instance. The order might change and additional arguments might be appended.
If you need to maintain the exact same arguments, it's advised to use additionalData instead.
noteIf the second instance is started by a different user than the first, the argv array will not include the arguments.
This event is guaranteed to be emitted after the ready event of app
gets emitted.
noteExtra command line arguments might be added by Chromium,
such as --original-process-start-time.
[H2] Methods​
The app object has the following methods:
noteSome methods are only available on specific operating systems and are
labeled as such.
[H3] app.quit()​
Try to close all windows. The before-quit event will be emitted first. If all
windows are successfully closed, the will-quit event will be emitted and by
default the application will terminate.
This method guarantees that all beforeunload and unload event handlers are
correctly executed. It is possible that a window cancels the quitting by
returning false in the beforeunload event handler.
[H3] app.exit([exitCode])​
exitCode Integer (optional)
Exits immediately with exitCode. exitCode defaults to 0.
All windows will be closed immediately without asking the user, and the before-quit
and will-quit events will not be emitted.
[H3] app.relaunch([options])​
options Object (optional)
args string[] (optional)
execPath string (optional)
Relaunches the app when the current instance exits.
By default, the new instance will use the same working directory and command line
arguments as the current instance. When args is spec