Devlog #3 --- exchange data between Electron and React

Dmytro — Sun, 01 Feb 2026 08:45:43 +0000

Hello everyone!

Today, I want to talk about the relationship between Electron and React. This is a very important topic, because you usually exchange data between them.

I was using React in Electron Forge, and for my extension, I need to get data from the system and also send a signal to replay the animation.

How to work with data exchange between Electron and React?

So, they exchange data with the help of IPC (Inter-process Communication). They have two types of modules, "ipcMain" and "ipcRender". The first module is used in the main file (index.ts). The second one is used in "preload.ts". To make a connection between them, a channel is used, which you can name whatever you want. This communication can analogous to a Socket, which is also used to channel/event to help exchange data.

How to make it in code?

Well, the first step is to choose a communication pattern. The official site proposes 4 patterns. I consider a pattern called "Main to renderer". Other patterns you can read at this link.

So, let's consider my code in the file "index.ts", which I implemented to send data about MEM, CPU, and Disk.

const sendData = () => {
  for (const [key, value] of Object.entries(funcs)) {
    mainWindow.webContents.send(key, value());
  }
}

const createWindow = (): void => {
  mainWindow = new BrowserWindow({
    height: 200,
    width: 400,
    frame: false,
    transparent: true,
    show: false,
    resizable: false,
    alwaysOnTop: true,
    skipTaskbar: true,
    roundedCorners: true,
    webPreferences: {
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
    },
  });

  mainWindow.on('blur', () => {
    mainWindow?.hide();
  });

  mainWindow.webContents.on('before-input-event', (event, input) => {
    if (input.key === 'Escape') {
      mainWindow?.hide();
      event.preventDefault();
    }
  });

  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
  setInterval(sendData, 1000)
};

app.whenReady().then(() => {
  tray = new Tray(icon)

  setInterval(() => {
    const data = MyNativeAddon.watchTray();
    console.log(data);
  }, 1000)

  tray.on("click", () => {
    if (!mainWindow) {
      createWindow();
    }

    if (!position) {
      const { x, y } = positioner.calculate(mainWindow.getBounds(), tray.getBounds())
      position = { x, y }
    }

    if (mainWindow?.isVisible()) {
      mainWindow.hide();
      mainWindow.webContents.send('stop-animation');
    } else {
      mainWindow.setAlwaysOnTop(true, "pop-up-menu");
      mainWindow.setPosition(position.x, position.y + 5);
      mainWindow.show();
      mainWindow.focus();
      mainWindow.webContents.send('start-animation');
    }
  });
})

I ask you to notice this part of the code:

 mainWindow.webContents.send(key, value());

Here, we create a channel on the main side using "ipcMain". Where key is the channel name, after that a value - it's a callback function. The value is not a required parameter.

Then, we need to create the same channel in "preload.ts":

import { contextBridge, ipcRenderer } from "electron";
import funcs from "./objects/funcs.object";

type Callback = (data: any) => void;

const exposedFuncs: Record<
  string,
  (callback: Callback) => void
> = {};

for (const [key] of Object.entries(funcs)) {
  exposedFuncs[key] = (callback: Callback) => {
    ipcRenderer.on(key, (_event, data) => callback(data));
  };
}

contextBridge.exposeInMainWorld('bridge', {
  ...exposedFuncs,
    startAnimation: (cb: () => void) => {
    ipcRenderer.on("start-animation", cb);
  },
  stopAnimation: (cb: () => void) => {
    ipcRenderer.on("stop-animation", cb);
  }
});

So, here we use contextBridge, which uses the exposeInMainWorld method and is written with a similar name as in "ipcMain" and similar key and callback.

Also, if you use TypeScript, you must create a <file_name>.d.ts file and write the following code:

export { };

declare global {
  interface Window {
    bridge: {
      getMemory: GetMemory;
      getCPU: GetCPU;
      getDisk: GetDisk;
    };
  }
}

How to call methods in React from Electron?

After that, when we create a "bridge", we can call methods in React from Electron:

import { useState, useEffect } from "react";

const useSystem = () => {
  const [memory, setMemory] = useState(null);
  const [cpu, setCpu] = useState(null);
  const [disk, setDisk] = useState(null);

  useEffect(() => {
    window.bridge.getMemory(data => setMemory(data));
    window.bridge.getCPU(data => setCpu(data));
    window.bridge.getDisk(data => setDisk(data));
  }, [memory, cpu, disk]);

  return { memory, cpu, disk };
}

export default useSystem

---------------------------------------------------------------------------------

import { useState, useEffect } from "react"

const useVisible = () => {
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    window.bridge.startAnimation(() => setVisible(true))
    window.bridge.stopAnimation(() => setVisible(false))
  }, [])

  return visible
}

export default useVisible

In my case, I used custom hooks for more comfort. But you can notice that I call functions via window... We can say that we expand the Window API which calls Renderer (our the window..) -> Preload -> Main -> Renderer.

In general, today we considered how to create signals between Electron and React in my example code. I hope this devlog helps other beginner developers.

Thanks to all for your attention! I hope you enjoyed reading my blog!

Have a good day!

Additionally, you can read about it on the official Electron website:
https://www.electronjs.org/docs/latest/api/web-contents
https://www.electronjs.org/docs/latest/api/ipc-renderer

Devlog #2 — how to connect TailwindCSS to Electron Forge?

Dmytro — Fri, 30 Jan 2026 05:00:13 +0000

Hello everybody!

Today I want to talk about TailwindCSS and Electron Forge, and how to connect them.

TailwindCSS is a pretty strong library for building UI. Personally, I think it’s a perfect solution, because you don’t need to create separate CSS or SCSS files and write styles for every single element.

Installing Tailwind CSS in an Electron Forge project

First, we need to install our packages for TailwindCSS:

npm install tailwindcss @tailwindcss/postcss postcss

Then we create a file called "postcss.config.cjs", where we write this code:

module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
    autoprefixer: {},
  },
};

Also, don't forget about "tailwind.config.js":

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./public/index.html"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Finally, we created a connection between TailwindCSS and Electron Forge! All that’s left is to import Tailwind CSS in index.css and make a wonderful design!

By the way, I'm going to make a little announcement. The next devlog will be about data exchange and signals between Electron and React. It's a very interesting and necessary topic.

Thanks to all for your attention! I hope you enjoyed reading my blog!

Have a good day!

Devlog #1 — Introduction started an extension for Linux

Dmytro — Wed, 28 Jan 2026 11:58:38 +0000

Hello everyone, and welcome to my first devlog!

Today, I want to talk about my project, which is called "Pulse". It’s an extension for different Linux distributions. For now, it’s a simple panel that you can monitor memory, CPU, and disk usage, but later I plan to add more interesting features.

This extension will be created with Electron Forge, using TypeScript, React, Framer Motion, and Tailwind CSS.

Why did I choose Electron Forge, rather than GJS?

So, I tried creating an extension via GJS, but I couldn’t achieve what I wanted. In my opinion, GJS has complicated documentation and doesn't provide the necessary tools for creating an extension, which I want to do. Undoubtedly, GJS is more lightweight and native to Linux, but it’s limited to GNOME, while I aim to support all distributions of Linux.

Creating a logo

Also, I decided to create a logo for my extension today. You can see it below.

It looks like a robot. Overall, I like the result, but generally I planned to make eyes that watch a computer. In the end, I managed to do it.

Thanks to all for your attention! I hope you enjoyed reading my first blog!
Have a good day!

DEV Community: Dmytro