Skip to main content
After this guide you’ll have an electron-based overlay that:
  • Renders a window in-game
  • Can be toggled via a hotkey
  • Can listen to a basic game event

​
Prerequisites

  • Node.js
  • An existing electron app to integrate into. For example the ElectronJS Quick Start.
  • The Overlayed CLI installed globally (pnpm i -g @overlayed/cli)
Alternatively, start with one of our completed example apps.

​
Quick Start Steps

1

Install the Overlayed packages

pnpm i @overlayed/app @overlayed/electron

pnpm i -g @overlayed/cli
2

Authenticate with Overlayed

Before starting development, authenticate with the Overlayed platform:
overlayed login
You’ll need access to the Overlayed Dashboard. You can apply for access here
3

Create and configure the app

We’ll set up a basic keybind, so we can use it later on to toggle the window.
import { overlayed } from "@overlayed/app";
import * as Siege from "@overlayed/app/siege";
import electron from "electron";

export const overlay = overlayed({
	electron,
	applicationId: "APPLICATION_ID_GOES_HERE", // You'll receive this from the Overlayed Dashboard
	modules: [Siege.module()],
	keybinds: {
		toggleMainWindow: {
			keys: ["AltLeft", "KeyX"],
			mode: "toggle",
		},
	},
});
4

Initialize your project

Initialize your project with the Overlayed CLI:
overlayed init
This will create an .overlayed directory with your application metadata. More details here.
5

Setup our in-game window

We’ll need to create a window using the Overlayed API since we want it to render in-game.
import { overlay } from "./overlayed.ts";
import type { RenderWindow, RenderWindowConstructorOptions } from "@overlayed/app";

export class AppWindow {
	private renderWindow: RenderWindow | null = null;

	public create(options?: RenderWindowConstructorOptions) {
		this.renderWindow = overlay.windows.createInGameWindow(options);

		// For now we'll load google.com, you'll want to replace this with your own HTML
		this.renderWindow.loadURL("https://google.com");
	}
}
6

Setup the window hotkey listener

We can listen to the keybind we created in the first step to toggle the window’s visibility.
import { overlay } from "./overlayed.ts";

export class AppWindow {
	private renderWindow: RenderWindow | null = null;

	public create(options?: RenderWindowConstructorOptions) {
		this.renderWindow = overlay.windows.createInGameWindow(options ?? {});
		this.registerKeybinds(this.renderWindow);
	}

	public destroy() {
		this.renderWindow?.destroy();
	}

	private registerKeybinds(renderWindow: RenderWindow) {
		overlay.keybinds.toggleMainWindow.on("toggle", () => {
			if (renderWindow.isVisible()) {
				renderWindow.hide();
			} else {
				renderWindow.show();
			}
		});
	}
}
7

Listen to the gameLaunch event

We’ll need to listen to the Game Launch event to know when the game has started.
import { AppWindow } from "./appWindow.ts";
import { overlay } from "./overlayed.ts";

function start() {
	const appWindow = new AppWindow();
	overlay.on("gameReady", () => appWindow.create());
	overlay.on("gameClose", () => appWindow.destroy());
}

app.on("ready", start);
8

Listen to a basic game event

There’s a variety of game events that can be listened to, for example we can listen to when a player joins the game.
import { AppWindow } from "./appWindow.ts";
import { overlay } from "./overlayed.ts";
import { siegeStateManager } from "./siegeStateManager.ts";
import { SiegeEvent } from "@overlayed/app/siege";

function setup() {
	const appWindow = new AppWindow();
	appWindow.create();

	overlay.on("gameReady", ({ game, inGameRenderingSupported }) => {
		if (game === "siege") {
			// Start receiving game events when the game is ready
			overlay.siege.readyForGameEvents();
			overlay.siege.onAny((event: SiegeEvent) => {
				overlay.log.info(event);
			});
		}
	});

	overlay.siege.on("player_joined", (event) => {
		overlay.log.info(event.content);
	});
}

setup();
9

Run the app

Make sure to configure the package.json and tsconfig.json (optional) files with the following:
  {
    // ...
    "scripts": {
      "start": "tsc && ogg-electron ."
    }
  }

pnpm start
Congrats! 🎉
You just made your first overlay with Overlayed!