Skip to main content

Electron Desktop Apps

Build lightweight, fast cross-platform desktop applications using Electron and boodoo. Leverage native platform tokens (Windows Fluent, macOS Aqua, Linux Adwaita), draggable titlebars, collapsible sidebars, and desktop UI primitives with zero build configuration.

Zero Extra Runtime

Vanilla JavaScript with no heavy component runtime tax. Boodoo loads in microseconds inside Electron's Chromium renderer.

Native Platform Styling

Out-of-the-box support for Windows 11 Fluent/Mica, macOS Aqua traffic lights, and Linux GNOME Adwaita headerbars.

Instant Scaffolding

Generate a complete, working Electron + Boodoo project in seconds with npx create-boodoo.

1. Scaffold with create-boodoo

The fastest way to start an Electron desktop project is using the interactive scaffolding CLI:

npx create-boodoo my-desktop-app

When prompted, select Option 4: Electron Desktop App. Then run:

cd my-desktop-app
npm install
npm start

2. Manual Setup in Existing Electron Apps

If you already have an Electron project, install boodoo as a dependency:

npm install boodoo

Renderer HTML Template

Include Boodoo's compiled CSS and JS in your index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self';">
  <title>My Electron App</title>
  <!-- Boodoo CSS -->
  <link rel="stylesheet" href="node_modules/boodoo/dist/css/boodoo.min.css">
</head>
<body class="bg-light">
  <div class="container py-4">
    <div class="card p-4 shadow-sm text-center">
      <h1 class="text-primary mb-2"><span>Hello from Electron &amp; Boodoo!</span></h1>
      <p class="text-muted mb-3"><span>Desktop-grade responsive UI with zero runtime overhead.</span></p>
      <div class="d-flex justify-content-center gap-2">
        <button type="button" class="btn btn-primary" id="btn-notify"><span>Trigger Toast</span></button>
      </div>
    </div>
  </div>

  <!-- Boodoo JS -->
  <script src="node_modules/boodoo/dist/js/boodoo.js"></script>
  <script src="renderer.js"></script>
</body>
</html>

3. Custom Frameless Titlebar & Window Dragging

Boodoo provides built-in CSS rules for draggable window regions and titlebars. In your Electron main.js, configure a hidden titlebar:

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('node:path');

function createWindow() {
  const win = new BrowserWindow({
    width: 1040,
    height: 720,
    titleBarStyle: 'hidden', // hides OS default title bar
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });

  win.loadFile('index.html');

  // Handle minimize, maximize, and close events via IPC
  ipcMain.on('window-minimize', () => win.minimize());
  ipcMain.on('window-maximize', () => win.isMaximized() ? win.unmaximize() : win.maximize());
  ipcMain.on('window-close', () => win.close());
}

app.whenReady().then(createWindow);

In your HTML layout, use Boodoo's .native-window, .native-titlebar, and .native-titlebar-controls classes. Draggable areas automatically receive -webkit-app-region: drag, while buttons have no-drag:

My Electron App
Workspace Content

Native desktop layout with draggable header and sidebar.

<div class="native-window" data-boodoo-platform="windows">
  <!-- Draggable Titlebar -->
  <header class="native-titlebar bg-white border-bottom">
    <span class="fw-semibold fs-7"><span>My Electron App</span></span>
    <div class="native-titlebar-controls">
      <button type="button" class="native-titlebar-btn" id="win-min"><span>—</span></button>
      <button type="button" class="native-titlebar-btn" id="win-max"><span>▢</span></button>
      <button type="button" class="native-titlebar-btn native-titlebar-close" id="win-close"><span>✕</span></button>
    </div>
  </header>

  <!-- Main Content Window -->
  <div class="native-window-content d-flex flex-grow-1">
    <!-- Desktop Sidebar -->
    <aside class="sidebar" data-boodoo="sidebar">
      <ul class="sidebar-nav">
        <li class="sidebar-item"><a href="#" class="sidebar-link active"><span>Dashboard</span></a></li>
        <li class="sidebar-item"><a href="#" class="sidebar-link"><span>Settings</span></a></li>
      </ul>
    </aside>
    <main class="flex-grow-1 p-2 bg-light overflow-auto">
      <h3><span>Workspace Content</span></h3>
    </main>
  </div>
</div>

When designing desktop experiences with Electron, these Boodoo components offer native desktop parity:

Component Purpose in Desktop / Electron Documentation Link
Native Components Platform styling for Windows Fluent/Mica, macOS Aqua, Linux Adwaita, and Photon desktop UI. Native UI Docs
Photon Desktop Styling Classic macOS and Electron desktop chrome: toolbars, button groups, pane splitters, and tab items. Photon Desktop Docs
Desktop Sidebar Collapsible multi-level desktop navigation with icon-only mode. Sidebar Docs
Splitter & Docking Panes Draggable split-view panes with pointer capture and bounds checking. Splitter Docs
Command Palette Global shortcut (Ctrl+K / Cmd+K) quick-open dialog and search runner. Command Palette Docs
Context Menu Right-click context menus with custom action handlers and nested items. Context Menu Docs
Data Table Client-side sortable, searchable, and paginated desktop data grids. Data Table Docs