Examples overview

In this section, we have collected a set of guides for common features that you may want to implement in your Electron application. Each guide contains a practical example in a minimal, self-contained example app. The easiest way to run these examples is by downloading Electron Fiddle.

Once Fiddle is installed, you can press on the “Open in Fiddle” button that you will find below code samples like the following one:

  • index.html
  • main.js
  • preload.js
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Hello World!</title>
  6.     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  7. </head>
  8. <body>
  9.     <h1>Hello World!</h1>
  10.     <p>
  11.         We are using Node.js <span id="node-version"></span>,
  12.         Chromium <span id="chrome-version"></span>,
  13.         and Electron <span id="electron-version"></span>.
  14.     </p>
  15. </body>
  16. </html>
  1. const { app, BrowserWindow } = require('electron')
  2. const path = require('path')
  4. function createWindow () {
  5.   const win = new BrowserWindow({
  6.     width: 800,
  7.     height: 600,
  8.     webPreferences: {
  9.       preload: path.join(__dirname, 'preload.js')
  10.     }
  11.   })
  13.   win.loadFile('index.html')
  14. }
  16. app.whenReady().then(() => {
  17.   createWindow()
  19.   app.on('activate', () => {
  20.     if (BrowserWindow.getAllWindows().length === 0) {
  21.       createWindow()
  22.     }
  23.   })
  24. })
  26. app.on('window-all-closed', () => {
  27.   if (process.platform !== 'darwin') {
  28.     app.quit()
  29.   }
  30. })
  1. window.addEventListener('DOMContentLoaded', () => {
  2.   const replaceText = (selector, text) => {
  3.     const element = document.getElementById(selector)
  4.     if (element) element.innerText = text
  5.   }
  7.   for (const type of ['chrome', 'node', 'electron']) {
  8.     replaceText(`${type}-version`, process.versions[type])
  9.   }
  10. })

Open in Fiddle

How to…?

You can find the full list of “How to?” in the sidebar. If there is something that you would like to do that is not documented, please join our Discord server and let us know!