WranggleRpc transport for Electron

Usage no npm install needed!

<script type="module">
  import wranggleRpcElectronTransport from 'https://cdn.skypack.dev/@wranggle/rpc-electron-transport';



A WranggleRpc transport for Electron apps, sending and receiving messages over messaging over its ipc system.


If you are using the full @wranggle/rpc package, the ElectronTransport is already bundled within. You can import/require it with:

import { WranggleRpc, ElectronTransport } from '@wranggle/rpc';
// or
const { WranggleRpc, ElectronTransport } = require('@wranggle/rpc');

Unbundled Alternative

If you prefer using just the packages you need, the unbundled es6 is also available on NPM:

yarn add @wranggle/rpc-core @wranggle/rpc-electron-transport
# or
npm install @wranggle/rpc-core @wranggle/rpc-electron-transport 

Unbundled import:

import WranggleRpc from '@wranggle/rpc-core';
import ElectronTransport from '@wranggle/rpc-electron-transport';


When creating your WranggleRpc endpoint, you can use the electron shortcut to also construct this transport. Eg:

const rpc = new WranggleRpc({
  electron: opts,
  channel: 'some-channel'

Or create a new instance yourself:

const rpc = new WranggleRpc({
  transport: new ElectronTransport(opts),
  channel: 'some-channel'


This transport has two required options: ipcSender and ipcReceiver.

Endpoint in the Main process

  • ipcReceiver Set it to ipcMain, from the import: const { ipcMain } = require('electron')

  • ipcSender If communicating with a browser window / renderer process, use the webContents reference after creating the new BrowserWindow().


const { WranggleRpc } = require('@wranggle/core');
const { ElectronTransport } = require('@wranggle/rpc-electron-transport');
const { ipcMain } = require('electron')

const rpc = new WranggleRpc({
  electron: {
    ipcReceiver: ipcMain,
    ipcSender: uiRenderer.webContents
uiRenderer.webContents.on('did-finish-load', startUsingIt(rpc));

Endpoint in a renderer/browser process

Set both ipcReceiver and ipcSender to Electron's ipcRenderer.

import WranggleRpc = from '@wranggle/core';
import ElectronTransport from '@wranggle/rpc-electron-transport';
const { ipcRenderer } = require('electron')

const rpc = new WranggleRpc({
  electron: {
    ipcReceiver: ipcRenderer,
    ipcSender: ipcRenderer,

Additional options

You can optionally set ipcChannel on the transport, used when sending and listening for ipc messages. It has nothing to do with the WranggleRpc channel option--take care to avoid confusing the two with each other.