> ## 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.
# Quickstart
> Setup a new electron app to integrate with Overlayed in just a few minutes
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](https://www.electronjs.org/docs/latest/tutorial/quick-start).
* The Overlayed CLI installed globally (`pnpm i -g @overlayed/cli`)
Alternatively, start with one of our completed [example apps](https://github.com/overlayed-gg/examples).
#### Quick Start Steps
```bash pnpm theme={null}
pnpm i @overlayed/app @overlayed/electron --save-exact
```
```bash npm theme={null}
npm i @overlayed/app @overlayed/electron --save-exact
```
```bash yarn theme={null}
yarn add @overlayed/app @overlayed/electron --exact
```
```bash pnpm theme={null}
pnpm i -g @overlayed/cli
```
```bash npm theme={null}
npm i -g @overlayed/cli
```
```bash yarn theme={null}
yarn add -g @overlayed/cli
```
Before starting development, authenticate with the Overlayed platform:
```bash theme={null}
overlayed login
```
You'll need access to the Overlayed Dashboard. You can apply for access [here](https://overlayed.gg/contact)
We'll set up a basic [keybind](/keybinds/introduction), so we can use it later on to toggle the window.
```typescript overlayed.ts theme={null}
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",
},
},
});
```
```typescript overlayed.config.ts theme={null}
import { defineConfig } from "@overlayed/app";
export default defineConfig({
applicationId: "APPLICATION_ID_GOES_HERE", // You'll receive this from the Overlayed Dashboard
app: {
include: [], // Only necessary for building, configure this later
},
site: {
include: [], // Only necessary for building, configure this later
},
});
```
Initialize your project with the Overlayed CLI:
```bash theme={null}
overlayed init
```
This will create an `.overlayed` directory with your application metadata. More details [here](/essentials/local-development).
We'll need to create a window using the [Overlayed API](/windows/introduction) since we want it to render in-game.
```typescript appWindow.ts theme={null}
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());
}
}
}
```
```typescript main.ts theme={null}
import { AppWindow } from "./appWindow.ts";
function setup() {
const appWindow = new AppWindow();
appWindow.create();
}
```
We can [listen to the keybind](/keybinds/introduction#listening-to-keybinds) we created in the first step to toggle the window's visibility.
```typescript appWindow.ts theme={null}
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();
}
});
}
}
```
We'll need to listen to the [Game Launch](/essentials/game-events#listening-to-game-events) event to know when the game has started.
```typescript main.ts theme={null}
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);
```
There's a variety of [game events](/essentials/game-events) that can be listened to, for example we can listen to when a player joins the game.
```typescript main.ts theme={null}
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();
```
Make sure to configure the `package.json` and `tsconfig.json` (optional) files with the following:
```json package.json theme={null}
{
// ...
"scripts": {
"start": "tsc && ogg-electron ."
}
}
```
```json tsconfig.json theme={null}
{
"compilerOptions": {
"module": "NodeNext",
"moduleResolution": "NodeNext",
"noImplicitAny": true,
"strict": true,
"outDir": "dist",
"baseUrl": ".",
"skipLibCheck": true,
"allowImportingTsExtensions": true,
"noEmit": true
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
```
```bash theme={null}
pnpm start
```
Congrats! 🎉 \
You just made your first overlay with Overlayed!