Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.overlayed.gg/llms.txt

Use this file to discover all available pages before exploring further.

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 --save-exact

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);

		// Load your site - local dev server in dev, deployed site in production
		if (import.meta.env.DEV) {
			// Point this to your local dev server
			this.renderWindow.loadURL("http://localhost:5173");
		} else {
			const siteUrl = overlay.windows.getProductionSiteUrl();
			this.renderWindow.loadURL(siteUrl.toString());
		}
	}
}
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!