Claude Code Electron: Desktop-Apps mit JavaScript entwickeln mit KI

Electron ist eine der interessantesten Plattformen, die je für Desktop-Entwicklung entstanden sind: Web-Technologien, die nativ auf Windows, macOS und Linux laufen — ein Codebase für alle drei Betriebssysteme. VS Code, Slack, Figma, 1Password — sie alle basieren auf Electron. Die Plattform ist produktionsreif, weit verbreitet, und sie hat eine Eigenheit, die sie für KI-assistierte Entwicklung besonders interessant macht: Electron-Code ist von Natur aus komplex zu strukturieren.

Main Process, Renderer Process, IPC-Kommunikation, Preload Scripts, Context Isolation — das sind nicht vier separate Konzepte, sondern ein zusammenhängendes Sicherheitsmodell, das verstanden werden muss, bevor man es richtig implementiert. Claude Code hilft genau hier: nicht durch magisches Generieren von Boilerplate, sondern durch das Verstehen dieser Zusammenhänge und das korrekte Scaffolding von Anfang an.

1. Electron-Architektur verstehen: Main vs. Renderer

Bevor Claude Code dir sinnvoll helfen kann, muss die Grundarchitektur klar sein — und Claude Code kann dir dabei helfen, sie zu internalisieren. Electron läuft in zwei getrennten Prozessen, die nicht direkt miteinander kommunizieren dürfen:

Der Main Process ist der Node.js-Prozess, der die gesamte App orchestriert. Er hat vollen Zugriff auf das Betriebssystem: Dateisystem, Netzwerk, native APIs, System-Tray. Er erstellt und verwaltet BrowserWindow-Instanzen, also die Fenster deiner App. Es gibt genau einen Main Process pro Electron-Applikation.

Der Renderer Process ist eine Chromium-Instanz, die den HTML/CSS/JavaScript-Inhalt deines Fensters rendert. Er ist absichtlich eingeschränkt: kein direkter Node.js-Zugriff, kein Zugriff auf native APIs. Das ist kein Bug, sondern eine Sicherheitsentscheidung. Ein Renderer Process ist potenziell mit externem Inhalt (Webseiten, eingebettete Inhalte) konfrontiert — deshalb darf er nicht unkontrolliert auf das System zugreifen.

2. BrowserWindow und IPC einrichten

Das erste Objekt, das du in einem Electron-Projekt brauchst, ist ein BrowserWindow. Es repräsentiert ein Anwendungsfenster und wird im Main Process erstellt. Claude Code kann dir das korrekte Setup generieren — inklusive der Sicherheitsoptionen, die viele Tutorials weglassen:

// main.js (Main Process)
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false,
    },
  });

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

app.whenReady().then(createWindow);

Zwei Optionen sind hier entscheidend: contextIsolation: true und nodeIntegration: false. Sie stellen sicher, dass der Renderer Process keinen direkten Zugriff auf Node.js-APIs hat. Die Kommunikation mit dem Main Process läuft ausschließlich über IPC — und das Preload Script definiert genau, welche IPC-Kanäle dem Renderer zur Verfügung stehen.

IPC — Inter-Process Communication — ist das Protokoll zwischen Main und Renderer. ipcMain registriert Handler im Main Process, ipcRenderer sendet Nachrichten aus dem Renderer. Claude Code kann beide Seiten scaffolden und dabei sicherstellen, dass die Kanalnamen konsistent sind und die Typen stimmen:

// main.js — IPC Handler registrieren
ipcMain.handle('read-config', async () => {
  const configPath = path.join(app.getPath('userData'), 'config.json');
  return fs.promises.readFile(configPath, 'utf-8');
});

ipcMain.handle('write-config', async (_event, data) => {
  const configPath = path.join(app.getPath('userData'), 'config.json');
  await fs.promises.writeFile(configPath, data, 'utf-8');
});

3. Preload Scripts und Context Isolation

Das Preload Script ist die Brücke zwischen Main und Renderer — und es ist der Ort, an dem du präzise kontrollierst, was der Renderer darf. Es läuft in einem privilegierten Kontext, hat Zugriff auf Node.js-APIs und ipcRenderer, aber es kann nur das an den Renderer weitergeben, was du explizit über contextBridge bereitstellst.

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  readConfig: () => ipcRenderer.invoke('read-config'),
  writeConfig: (data) => ipcRenderer.invoke('write-config', data),
  onUpdateAvailable: (callback) =>
    ipcRenderer.on('update-available', (_event, info) => callback(info)),
});

Im Renderer greifst du dann über window.electronAPI auf diese Funktionen zu — und nur auf diese. Du kannst kein require('fs') aufrufen, du kannst nicht direkt mit dem Dateisystem interagieren. Das ist genau richtig so.

Claude Code hilft besonders dabei, Preload Scripts konsistent zu halten: Wenn du einen neuen IPC-Kanal im Main Process hinzufügst, kann Claude Code automatisch den entsprechenden Eintrag in contextBridge ergänzen und die TypeScript-Typen aktualisieren.

4. Projekt-Setup mit Electron Forge

Electron Forge ist das offizielle Build-Tool für Electron-Projekte: Scaffolding, Packaging, Publishing — alles in einem. Claude Code kann dir nicht nur helfen, Forge einzurichten, sondern auch die Konfiguration für verschiedene Targets (Windows Installer, macOS DMG, Linux AppImage) zu generieren.

npm init electron-app@latest meine-app -- --template=webpack

Das Webpack-Template ist der empfohlene Startpunkt: Es trennt Main und Renderer sauber, konfiguriert Hot Reload für den Renderer im Development-Modus und erzeugt ein produktionsreifes Bundle beim Build. Claude Code versteht diese Struktur und kann gezielt Dateien in den richtigen Verzeichnissen anlegen oder modifizieren, ohne die Build-Konfiguration zu beschädigen.

// forge.config.js — Packaging-Ziele konfigurieren
module.exports = {
  packagerConfig: {
    asar: true,
    icon: './assets/icon',
  },
  makers: [
    { name: '@electron-forge/maker-squirrel', config: {} },
    { name: '@electron-forge/maker-dmg', config: { format: 'ULFO' } },
    { name: '@electron-forge/maker-deb', config: {} },
    { name: '@electron-forge/maker-rpm', config: {} },
  ],
};

5. Auto-Updater mit electron-updater

Eine Desktop-App, die sich nicht selbst updaten kann, zwingt Nutzer zum manuellen Download — das ist 2026 nicht akzeptabel. electron-updater aus dem electron-builder-Paket ist die de-facto-Standardlösung für automatische Updates in Electron-Apps.

Das Setup besteht aus drei Teilen: dem Konfigurieren von autoUpdater im Main Process, dem Bereitstellen von Update-Feeds (GitHub Releases oder ein eigener Server), und dem Informieren des Renderers über verfügbare Updates per IPC.

// updater.js (wird im Main Process geladen)
const { autoUpdater } = require('electron-updater');

autoUpdater.checkForUpdatesAndNotify();

autoUpdater.on('update-available', (info) => {
  mainWindow.webContents.send('update-available', info);
});

autoUpdater.on('update-downloaded', () => {
  mainWindow.webContents.send('update-downloaded');
});

Claude Code kann den kompletten Update-Flow scaffolden: Main-Process-Handler, IPC-Events im Preload Script, und die UI-Komponente im Renderer, die dem Nutzer anzeigt, dass ein Update verfügbar ist und einen Restart anbietet. Die Verknüpfung dieser drei Schichten fehlerfrei hinzubekommen, kostet normalerweise Zeit — Claude Code macht das in einem Schritt.

6. Native OS-Integration

Der Hauptvorteil von Electron gegenüber einer Web-App ist native OS-Integration: System Tray, Desktop-Notifications, Datei-Dialoge, Clipboard, globale Keyboard-Shortcuts. All das ist über Electron-APIs erreichbar — aber die APIs sind fragmentiert und erfordern für jedes Feature einen anderen Ansatz.

System Tray

// main.js
const { Tray, Menu } = require('electron');
const tray = new Tray(path.join(__dirname, 'assets/tray-icon.png'));

const contextMenu = Menu.buildFromTemplate([
  { label: 'Öffnen', click: () => mainWindow.show() },
  { type: 'separator' },
  { label: 'Beenden', click: () => app.quit() },
]);

tray.setContextMenu(contextMenu);
tray.setToolTip('Meine App');

Datei-System-Zugriff

Für Datei-Dialoge, Lesen und Schreiben von Dateien nutzt du ausschließlich den Main Process — nie den Renderer direkt. Claude Code hält diese Trennung konsequent ein und erzeugt automatisch den IPC-Handler im Main Process und den entsprechenden Wrapper im Preload Script:

// main.js
const { dialog } = require('electron');
const fs = require('fs');

ipcMain.handle('open-file-dialog', async () => {
  const result = await dialog.showOpenDialog({ properties: ['openFile'] });
  if (result.canceled) return null;
  return fs.promises.readFile(result.filePaths[0], 'utf-8');
});

Das Muster ist immer dasselbe: native API im Main Process, IPC-Handler als Brücke, Preload Script als explizite Schnittstelle, Aufruf im Renderer über window.electronAPI. Claude Code generiert alle vier Schichten konsistent — das ist der eigentliche Zeitgewinn.

7. Wie Claude Code konkret hilft

Electron-Entwicklung hat einen hohen Boilerplate-Anteil, der sich durch alle Projekte zieht: IPC-Kanäle definieren, Preload-Wrapper schreiben, TypeScript-Typen synchron halten, Forge-Konfiguration anpassen. Das ist repetitiv und fehleranfällig — genau der Bereich, wo Claude Code am stärksten ist.

• IPC-Scaffolding: Beschreibe einen Anwendungsfall ("Nutzer soll Dateien öffnen und speichern können"), Claude Code generiert Handler, Preload-Wrapper und Renderer-Aufruf als zusammenhängendes Set
• Preload Script Generation: Claude Code hält contextBridge-Expositionen und IPC-Handler automatisch synchron, inklusive TypeScript-Typen für window.electronAPI
• Build-Konfiguration: Forge- und electron-builder-Konfigurationen für verschiedene Plattformen generieren und anpassen, ohne die bestehende Konfiguration zu brechen
• Security-Audit: Bestehende Electron-Codebases auf unsichere Patterns prüfen (nodeIntegration: true, fehlende Context Isolation, exponierte IPC-Kanäle)

"Ich habe Claude Code gebeten, unsere bestehende Electron-App auf Sicherheitsprobleme zu prüfen. Es fand in fünf Minuten drei Stellen, an denen wir ipcRenderer direkt im Renderer verwendet hatten — ohne Preload Script. Das Refactoring auf Context Isolation hat einen halben Tag gedauert, nicht drei."

Der entscheidende Unterschied: Claude Code versteht Electron nicht als eine Liste von APIs, sondern als ein Architekturmodell. Es weiß, warum Context Isolation existiert, warum nodeIntegration: false der sichere Default ist, warum IPC bidirektional funktioniert. Das bedeutet, es macht keine Vorschläge, die technisch funktionieren aber das Sicherheitsmodell untergraben.

• Claude Code Debugging — Bugs in Electron-Apps systematisch aufspüren und lösen
• Claude Code für Unternehmen — Deployment, Zugriffskontrolle und Team-Workflows