Make your Electron IPC a pleasure to use, and never think about preload.ts again! This package lets renderer code call main-process services as if they were local objects, with typed event payloads, and a lovely dev experience.
- You hate wiring up IPC in main, renderer, and preload
- Define one shared service contract used by main and renderer
- Get deterministic errors with service/method context
- Handle method calls and events
npm install @rupertsworld/electron-ipcFirst, define the API you want to call from renderer:
// main/my-api.ts
import { IPCService } from '@rupertsworld/electron-ipc';
export type MyAPIEvents = {
greeting: { text: string };
};
export class MyAPI extends IPCService<MyAPIEvents> {
hello(name: string) {
this.emit('greeting', { text: `Hello ${name}` });
}
}Next, expose the IPC service in your main process, and set up the preload script (want to use your own preload? see advanced below).
// main/index.ts
import { exposeIPC, getPreloadPath } from '@rupertsworld/electron-ipc';
import { MyAPI } from './my-api.ts';
import { BrowserWindow } from 'electron';
exposeIPC(MyAPI);
const window = new BrowserWindow({
webPreferences: {
preload: getPreloadPath(),
},
});Now, simply resolve your API and start using it!
// renderer/index.ts
import { resolveIPC } from '@rupertsworld/electron-ipc/renderer';
import type { MyAPI } from '../main/my-api.ts';
const api = resolveIPC<MyAPI>('MyAPI');
api.on('greeting', ({ text }) => {
console.log(text);
});
await api.hello('Rupert'); // Hello RupertNote: when using renderer import from @rupertsworld/electron-ipc/renderer.
// preload.ts
import { enableIPC } from '@rupertsworld/electron-ipc';
enableIPC();Use getPreloadPath() by default. Use custom preload + enableIPC() when you need to own preload wiring (for example adding other preload-only APIs, custom security checks, or project-specific preload boot order).
Important: a consumer-authored preload must be emitted in a format Electron preload can execute in your app setup (commonly bundled/transformed to CJS). Do not point webPreferences.preload at raw TypeScript source.
The repository includes a minimal typed Electron app under example/.
From the package root:
npm run --prefix example startFull API reference: docs/api.md