electron preload ⇒ renderer

solution 1 (credit: Vendicated)

setup:

// preload
contextBridge.exposeInMainWorld("MyApi", {
  onMyMessage: listener => void ipcRenderer.on('my-message', listener)
})

// renderer
MyApi.onMyMessage((event, data) => console.log(data));

use:

browserWindow.webContents.send("my-message", { some: { data: "it just needs to be clonable (most js structures are)" }});

if you're using typescript, you might wanna check out how to get intelliSense for contextBridge

solution 2 (Deprecated) SO Post

You can use Window.postMessage() to send data from preload to renderer. This approach is not recommended, because a lot of polyfills set the event.source to window

// preload
window.postMessage("your-data", "*");

// renderer
window.addEventListener("message", (event) => {
  // event.source === window means the message is coming from the preload
  // script, as opposed to from an <iframe> or other source.
  if (event.source === window) {
    console.log("from preload:", event.data);
  }
});

Or you can communicate directly from the main process to the renderer process AKA "main world" as seen here in the docs