How to Build a Windows App with Node.js: A Complete Guide (2026)

Building a Windows application using Node.js might seem unconventional, but it's a powerful way to leverage JavaScript skills beyond web development. In this tutorial, we'll guide you through creating an interactive Windows app where you can draw pixels and interact with the GUI using Node.js and the Electron framework.

Key Takeaways

• Learn to set up Electron for Windows app development with Node.js.
• Understand how to create interactive GUI elements for user interaction.
• Gain insight into handling pixels and graphics within Electron.
• Explore common troubleshooting tips to resolve errors during development.
• Discover how to package your Node.js app for Windows distribution.

Node.js is widely known for server-side applications, but when combined with Electron, it can be used to build cross-platform desktop applications. This approach is particularly useful if you're comfortable with JavaScript and want to create desktop apps without learning a new language. In this tutorial, we'll focus on creating a basic Windows application that allows users to draw on a canvas, making it interactive and visually appealing.

Prerequisites

• Basic knowledge of JavaScript and Node.js
• Node.js installed (v18.0.0 or later)
• npm installed (v9.0.0 or later)
• A code editor like VSCode
• Familiarity with HTML and CSS is helpful

Step 1: Set Up Your Development Environment

First, ensure you have Node.js and npm installed on your system. You can verify this by running:

node -v
npm -v

If not installed, download and install them from the official Node.js website.

Install Electron

Electron is the framework that will allow us to create the desktop app using web technologies. To install Electron globally, use:

npm install -g electron

Next, create a new directory for your project, navigate to it, and initialize a new Node.js project:

mkdir my-electron-app
cd my-electron-app
npm init -y

Step 2: Create the Basic Electron App

Create a main JavaScript file, typically named main.js, which will be the entry point for your Electron app. Inside, set up a basic Electron application:

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

This code initializes a new window that loads an HTML file.

Step 3: Design the User Interface

Create an index.html file in the same directory. This file will contain the basic structure of your app's interface:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pixel Drawing App</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="drawingCanvas" width="800" height="600"></canvas>
  <script src="renderer.js"></script>
</body>
</html>

This sets up a canvas element where users can draw.

Step 4: Implement Drawing Functionality

Next, create a renderer.js file to handle the drawing logic. This script will add interactivity to the canvas:

const canvas = document.getElementById('drawingCanvas');
const context = canvas.getContext('2d');
let drawing = false;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mousemove', draw);

function startDrawing(event) {
  drawing = true;
  draw(event);
}

function stopDrawing() {
  drawing = false;
  context.beginPath();
}

function draw({ clientX: x, clientY: y }) {
  if (!drawing) return;

  context.lineWidth = 5;
  context.lineCap = 'round';
  context.strokeStyle = 'black';

  context.lineTo(x - canvas.offsetLeft, y - canvas.offsetTop);
  context.stroke();
  context.beginPath();
  context.moveTo(x - canvas.offsetLeft, y - canvas.offsetTop);
}

This code enables basic drawing on the canvas using mouse events.

Step 5: Run Your Application

To run your Electron application, add a start script to your package.json file:

"scripts": {
  "start": "electron ."
}

Then, start your application using:

npm start

You should see your app with a canvas where you can draw using the mouse.

Common Errors/Troubleshooting

• Error: "Cannot find module 'electron'"
  Solution: Ensure Electron is installed globally or locally in your project directory.
• Issue: Canvas does not respond to mouse events.
  Solution: Check the renderer.js file for correct event listeners and ensure the script is correctly linked in index.html.
• Error: "app is not defined" in main.js.
  Solution: Verify that the Electron module is correctly imported using require('electron').

With these steps, you can now start building more complex desktop applications using Node.js and Electron, combining web technologies with native desktop functionality.

Frequently Asked Questions

Can I use Node.js to build Windows applications?

Yes, using Node.js with frameworks like Electron, you can build cross-platform desktop applications.

What is Electron?

Electron is a framework that allows you to create native applications with web technologies like JavaScript, HTML, and CSS.

Is Electron only for Windows?

No, Electron is cross-platform and can be used to build applications for Windows, macOS, and Linux.

How do I troubleshoot common Electron errors?

Refer to the Common Errors section in this guide for solutions to typical issues encountered during development.