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:
Alternatively, start with one of our completed example apps.
1

Install the app

pnpm i @overlayed/app @overlayed/electron
2

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",
		},
	},
});
3

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");
	}
}
4

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();
      }
    });
  }
}
5

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

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) => {
            console.log(event);
          });
        }
      })

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

    setup();
7

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!