# How to Build draw.io Desktop for Different Platforms Using electron-builder Configurations > Learn how to build draw.io Desktop for Windows macOS and Linux using electron-builder configurations. Automate your build pipeline with npm scripts for signed installers. - Repository: [draw.io/drawio-desktop](https://github.com/jgraph/drawio-desktop) - Tags: how-to-guide - Published: 2026-03-05 --- **draw.io Desktop uses platform-specific JSON configuration files with electron-builder to create signed installers for Windows, macOS, and Linux through npm scripts that automate the entire build pipeline.** The `jgraph/drawio-desktop` repository packages the web-based diagram editor as a cross-platform desktop application using **electron-builder**. By maintaining separate JSON configuration files for each target platform, the project streamlines the creation of architecture-specific installers, security hardening, and automated GitHub releases. ## Platform-Specific electron-builder Configurations draw.io Desktop organizes its build logic into discrete configuration files at the repository root. Each file defines the target architecture, output formats, and platform-specific options. ### Windows Builds (x64, 32-bit, and ARM64) Windows targets are split across three dedicated files to handle distinct architecture requirements: - **[`electron-builder-win.json`](https://github.com/jgraph/drawio-desktop/blob/main/electron-builder-win.json)** – Produces **NSIS** (`nsis`) and **MSI** (`msi`) packages for `x64` systems. - **[`electron-builder-win32.json`](https://github.com/jgraph/drawio-desktop/blob/main/electron-builder-win32.json)** – Generates a **NSIS** installer for `ia32` (32-bit) architecture only. - **[`electron-builder-win-arm64.json`](https://github.com/jgraph/drawio-desktop/blob/main/electron-builder-win-arm64.json)** – Creates both a **NSIS** installer and a **portable ZIP** archive for `arm64` devices. All Windows configurations apply Electron security fuses via the `afterPack` hook pointing to `build/fuses.cjs`. ### macOS and Linux Builds The **[`electron-builder-linux-mac.json`](https://github.com/jgraph/drawio-desktop/blob/main/electron-builder-linux-mac.json)** file handles both Unix-like operating systems: - **macOS** – Outputs `dmg` and `zip` formats for `x64`, `arm64`, and `universal` binaries. It includes `afterSign` hooks that trigger `build/notarize.mjs` for Apple notarization and enables the hardened runtime. - **Linux** – Generates `AppImage`, `deb`, and `rpm` packages for both `x64` and `arm64` architectures. ## Common Configuration Base Despite platform differences, all JSON files inherit shared properties that define core application behavior: - **`appId`** – Set to `com.jgraph.drawio.desktop` for consistent OS-level identification. - **`asar: true`** – Bundles source files into an ASAR archive to improve load times and prevent tampering. - **`files`** – Includes the entire repository contents while excluding `WEB-INF` directories. - **`directories.output`** – Directs all build artifacts to `./dist/`. - **`npmRebuild: false`** – Disables rebuilding of native modules during packaging. - **`publish.provider: "github"`** – Configures automatic artifact uploads to GitHub releases when using `--publish always`. - **`fileAssociations`** – Registers `.drawio` and `.vsdx` file extensions on every supported OS. ## NPM Scripts and Build Pipeline The **[`package.json`](https://github.com/jgraph/drawio-desktop/blob/main/package.json)** maps each configuration to a convenient npm script, enabling one-command builds: ```json "scripts": { "release-win": "electron-builder --config electron-builder-win.json --publish always", "release-win32": "electron-builder --config electron-builder-win32.json --publish always", "release-win-arm64": "electron-builder --config electron-builder-win-arm64.json --publish always", "release-linux": "electron-builder --config electron-builder-linux-mac.json --publish always", "release-snap": "electron-builder --config electron-builder-snap.json --publish never" } ``` Executing a script triggers a four-stage pipeline: 1. **Version Sync** – `npm run sync` executes `sync.cjs` to copy the version string from `drawio/VERSION` into [`package.json`](https://github.com/jgraph/drawio-desktop/blob/main/package.json). 2. **Dependency Installation** – `npm ci` installs pre-built native modules without rebuilding. 3. **electron-builder Execution** – Reads the specified JSON config, bundles the Electron app, applies `afterPack` hooks for security fuses (Windows) or `afterSign` for notarization (macOS), and generates distributables. 4. **GitHub Publish** – When `--publish always` is set, artifacts upload automatically to the repository's releases page. ## Building from Source To produce installers locally or in CI/CD environments: ```bash # Clone including the draw.io submodule git clone --recursive https://github.com/jgraph/drawio-desktop.git cd drawio-desktop # Install dependencies npm ci # Synchronize version from submodule npm run sync # Build for specific platforms npm run release-win # Windows x64 (NSIS + MSI) npm run release-win32 # Windows 32-bit (NSIS) npm run release-win-arm64 # Windows ARM64 (NSIS + portable) npm run release-linux # macOS (dmg/zip) and Linux (AppImage/deb/rpm) ``` After completion, installers appear in `dist/`: - `draw.io--windows-installer.exe` (NSIS) - `draw.io-.msi` (MSI) - `draw.io--.dmg` (macOS) - `draw.io--.AppImage` (Linux) ## Summary - **draw.io Desktop** uses separate `electron-builder` JSON files for Windows x64, Windows 32-bit, Windows ARM64, and combined macOS/Linux builds. - **Common settings** like `appId`, `asar` archiving, and `fileAssociations` are shared across all configurations to ensure consistent application identity and behavior. - **NPM scripts** in [`package.json`](https://github.com/jgraph/drawio-desktop/blob/main/package.json) provide one-command build triggers that handle versioning, packaging, signing, and GitHub publishing automatically. - **Security hardening** is applied via `afterPack` hooks (`build/fuses.cjs`) on Windows and `afterSign` notarization (`build/notarize.mjs`) on macOS. - **Output artifacts** land in `./dist/` and include platform-native formats like NSIS, MSI, DMG, and AppImage. ## Frequently Asked Questions ### What is the purpose of the sync.cjs script in draw.io Desktop builds? The `sync.cjs` script located in the repository root reads the version number from the `drawio/VERSION` file (populated by the draw.io submodule) and injects it into [`package.json`](https://github.com/jgraph/drawio-desktop/blob/main/package.json) before building. This ensures that the packaged desktop application reports the same version as the underlying web application. ### How does draw.io Desktop handle code signing and notarization? For **macOS**, the [`electron-builder-linux-mac.json`](https://github.com/jgraph/drawio-desktop/blob/main/electron-builder-linux-mac.json) configuration specifies an `afterSign` hook that executes `build/notarize.mjs`, which submits the compiled app to Apple's notarization service using the hardened runtime. On **Windows**, the `afterPack` hook runs `build/fuses.cjs` to flip Electron security fuses that disable Node.js integration in the renderer and enable stricter security policies. ### Where are the final build artifacts located after running electron-builder? All configuration files set `"directories.output": "./dist/"`, which places completed installers and packages in the `dist/` folder at the repository root. Files are named according to the pattern `draw.io--.` (or `draw.io--windows-installer.exe` for NSIS). ### What file extensions does draw.io Desktop register during installation? The `fileAssociations` array in each configuration file registers `.drawio` and `.vsdx` extensions with the operating system, allowing users to open diagram files directly from the file explorer into the draw.io Desktop application on Windows, macOS, and Linux.