dfgdfgd

Electron is an open-source framework that lets you build cross-platform desktop applications using web technologies like HTML, CSS, and JavaScript. [1, 2, 3, 4, 5]

It essentially combines the Chromium rendering engine (the core of Google Chrome) with the Node.js runtime. This means your app runs inside a dedicated web browser window but has full access to the user's operating system. [1, 2, 3, 4, 5]

1. The Core Architecture

An Electron app relies on a two-process model to keep the application secure and stable. [1]

The Main Process:
- Runs in a Node.js environment.
- Acts as the orchestrator of your application.
- Controls the app lifecycle (starting, quitting).
- Creates and manages native operating system windows.
- Has full access to operating system APIs (file system, system tray, notifications). [1, 2, 3, 4, 5]
The Renderer Process:
- Runs inside a Chromium browser window instance.
- Responsible for rendering the web page (your user interface).
- By default, it does not have direct access to Node.js or native OS APIs for security reasons.
- You can have multiple renderer processes if your app has multiple windows. [1, 2, 3, 4, 5]

2. The Bridge (Preload Scripts)

Because the Renderer cannot touch the file system and the Main process cannot touch the UI, they need a safe way to talk to each other. [1, 2]

Preload Scripts: This script acts as an isolated bridge. It runs before the web page loads but has access to both Node.js APIs and the browser context. [1, 2, 3, 4]
Context Isolation: It securely exposes specific, safe shortcuts (like a function to save a file) from the Main process to the Renderer process without exposing raw Node.js capabilities to the internet.

3. Communication (IPC)

The processes talk to each other using Inter-Process Communication (IPC). It works like an event listener system: [1, 2]

ipcRenderer.send(): The UI sends a message or request to the background logic (e.g., "User clicked the save button").
ipcMain.on(): The background logic listens for that message, runs the Python code or touches the file system, and handles the action. [1]

4. Minimal File Structure

A basic Electron project requires only three core files: [1]

package.json: Configures your project dependencies and points to your main script.
main.js: Contains the Main Process code to open your app window.
index.html: The actual web page interface that users will see. [1, 2, 3, 4, 5]

To help you get started with your project, I can provide the exact code for these three fundamental files so you can run a "Hello World" Electron window on your computer. Would you like the code boilerplate, or should we look at how FastAPI will connect to this setup?

28 sites

What is Electron.js? Empowering Cross-Platform Development with a Robust Framework
13 Oct 2023 — Definition: Electron ( Electron framework ) is an open-source framework that facilitates the development of cross-platform desktop...
Medium
Top 25+ Electron App Examples for Desktop to See 2026
14 Apr 2026 — Electron combines Node. js and Chromium to simplify development and let web technologies build cross platform desktop apps with na...
eSparkBiz
Creating a Desktop App with Electron, Typescript, and Angular | Tutorials
5 Jan 2024 — An Electron app is a desktop application that is built using web technologies such as HTML, CSS, and JavaScript. It allows develop...
buddy.works

Show all

You said: yes give me the hellow world code then how do we run it like simply run dev ?? and it we make a project then how can we manage the proper folder structure for it.

1. Hello World Boilerplate

Create a new folder on your computer, open your terminal inside it, and initialize a Node project by running npm init -y. Then, install Electron as a development dependency: [1, 2, 3, 4, 5]

bash

npm install electron --save-dev

Use code with caution.

Now, create the following three core files in your root directory:

package.json

Update your existing package.json to include "main": "main.js" and add a start script. [1, 2, 3, 4]

json

{
  "name": "electron-fastapi-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^31.0.0" 
  }
}

Use code with caution.

tysdtagstag1tag2

Back to all articles

this is the sample blog