What is Electron?
Getting started
Running examples with Electron Fiddle
-
main.js -
preload.js -
index.html
const { app , BrowserWindow } = require ( 'electron/main' )
const path = require ( 'node:path' )
function createWindow ( ) {
const win = new BrowserWindow ( {
width : eight hundred ,
height : six hundred ,
webPreferences : {
preload : path . join ( __dirname , 'preload.js' )
}
} )
win . loadFile ( 'index.html' )
}
app . whenReady ( ) . then ( ( ) => {
createWindow ( )
app . on ( 'activate' , ( ) => {
if ( BrowserWindow . getAllWindows ( ) . length === zero ) {
createWindow ( )
}
} )
} )
app . on ( 'window-all-closed' , ( ) => {
if ( process . platform !== 'darwin' ) {
app . quit ( )
}
} )
window . addEventListener ( 'DOMContentLoaded' , ( ) => {
const replaceText = ( selector , text ) => {
const element = document . getElementById ( selector )
if ( element ) element . innerText = text
}
for ( const type of [ 'chrome' , 'node' , 'electron' ] ) {
replaceText ( ` ${ type } -version ` , process . versions [ type ] )
}
} )
<! DOCTYPE html >
< html >
< head >
< meta charset = " UTF-8 " >
< title > Hello World! </ title >
< meta http-equiv = " Content-Security-Policy " content = " script-src 'self' 'unsafe-inline'; " />
</ head >
< body >
< h1 > Hello World! </ h1 >
< p >
We are using Node.js < span id = " node-version " > </ span > ,
Chromium < span id = " chrome-version " > </ span > ,
and Electron < span id = " electron-version " > </ span > .
</ p >
</ body >
</ html >
What is in the docs?
-
Tutorial : An end-to-end guide on how to create and publish your first Electron application. -
Processes in Electron : In-depth reference on Electron processes and how to work with them. -
Best Practices : Important checklists to keep in mind when developing an Electron app. -
Examples : Quick references to add features to your Electron app. -
Development : Miscellaneous development guides. -
Distribution : Learn how to distribute your app to end users. -
Testing And Debugging : How to debug JavaScript, write tests, and other tools used to create quality Electron applications. -
References : Useful links to better understand how the Electron project works and is organized. -
Contributing : Compiling Electron and making contributions can be daunting. We try to make it easier in this section.
Getting help
-
If you need help with developing your app, our community Discord server is a great place to get advice from other Electron app developers. -
If you suspect you're running into a bug with the electron package, please check the GitHub issue tracker to see if any existing issues match your problem. If not, feel free to fill out our bug report template and submit a new issue.