Desktop App using HTML, CSS & JavaScript

Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.

Before proceeding with this tutorial, you should have a basic understanding of Javascript and HTML. You also need to know about a few native Node.js

Electron enables you to create desktop applications with pure JavaScript by providing a runtime with rich native APIs.

To get started with developing using the Electron, you need to have Node and npm installed.

First download sample app from this URL.

According to the main.js file, we open index.html file in a electron browser window.

const { app, BrowserWindow, ipcMain } = require("electron");

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600


// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {

  app.on("activate", function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow();

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit();


To run this app open a terminal & run below command to install dependencies & libraries.

npm install

then run this to start the example app.

npm start

Then example app will open.

Leave a Reply