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-4 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