desktop

lobehub/lobehub

Electron desktop development guide for LobeHub — IPC handlers, controllers, preload scripts, and window management.

What is desktop?

A reference guide for building Electron desktop features in LobeHub. Use this when adding new desktop capabilities, setting up IPC communication between main and renderer processes, or managing windows and menus.

Create and register controller modules for main process functionality
Define typed IPC interfaces for secure main-renderer communication
Implement renderer services that invoke desktop features
Configure window and menu management
Set up preload scripts to expose APIs securely
Add tests for desktop controllers

How to install desktop

npx skills add https://github.com/lobehub/lobehub --skill desktop

Prerequisites

Familiarity with Electron architecture (main/renderer processes)
Understanding of TypeScript and async patterns
Access to LobeHub repository structure

Claude Code

Cursor

Windsurf

Cline

How to use desktop

1.Create a controller class in apps/desktop/src/main/controllers/ extending ControllerModule
2.Define IPC parameter and result types in packages/electron-client-ipc/src/types.ts
3.Register the controller in apps/desktop/src/main/controllers/registry.ts
4.Create a renderer service in src/services/electron/ that calls the IPC method
5.Implement store actions if needed for state management
6.Add unit tests in apps/desktop/src/main/controllers/__tests__/

Use cases

Good for

Adding a new system-level feature (file access, notifications, etc.)
Implementing IPC communication between Electron main and renderer processes
Configuring application menus and window behavior
Creating typed service layers for desktop functionality
Setting up secure API exposure through preload scripts

Who it's for

Electron/desktop developers
LobeHub contributors extending desktop features
Full-stack developers building cross-platform apps

desktop FAQ

Where do I add new desktop feature code?

Create a controller class in apps/desktop/src/main/controllers/ that extends ControllerModule, then register it in registry.ts.

How do I communicate between main and renderer processes?

Define IPC types in packages/electron-client-ipc/src/types.ts, implement the handler in a controller, and create a renderer service that calls it via ensureElectronIpc().

What security considerations should I follow?

Validate all inputs in controllers, limit exposed APIs to what's necessary, and use preload scripts to securely expose only required functionality to the renderer.

Where are window and menu configurations?

Refer to references/window-management.md and references/menu-config.md in the skill documentation for detailed setup instructions.

Full instructions (SKILL.md)

Source of truth, from lobehub/lobehub.

name: desktop description: Electron desktop development guide — IPC handlers, controllers, preload scripts, window/menu management. disable-model-invocation: true

Desktop Development Guide

Architecture Overview

LobeHub desktop is built on Electron with main-renderer architecture:

Main Process (apps/desktop/src/main): App lifecycle, system APIs, window management
Renderer Process: Reuses web code from src/
Preload Scripts (apps/desktop/src/preload): Securely expose main process to renderer

Adding New Desktop Features

1. Create Controller

Location: apps/desktop/src/main/controllers/

import { ControllerModule, IpcMethod } from '@/controllers';

export default class NewFeatureCtr extends ControllerModule {
  static override readonly groupName = 'newFeature';

  @IpcMethod()
  async doSomething(params: SomeParams): Promise<SomeResult> {
    // Implementation
    return { success: true };
  }
}

2. Define IPC Types

Location: packages/electron-client-ipc/src/types.ts

export interface SomeParams {
  /* ... */
}
export interface SomeResult {
  success: boolean;
  error?: string;
}

3. Create Renderer Service

Location: src/services/electron/

import { ensureElectronIpc } from '@/utils/electron/ipc';

const ipc = ensureElectronIpc();

export const newFeatureService = async (params: SomeParams) => {
  return ipc.newFeature.doSomething(params);
};