> ## 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.

# Overlay Windows

> Windows are a core part of overlays, this guide will cover various utilities we provide for managing them.

## Creating a Window

Create out of game windows with the following:

```typescript theme={null}
overlay.windows.createWindow(options);
```

This will return an electron [BrowserWindow](https://www.electronjs.org/docs/latest/api/browser-window).

<Info>You must create every out of game window with this method so that Overlayed can keep track of them.</Info>

### In-game Windows

To render a window in-game, you'll need to do the following:

```typescript theme={null}
overlay.windows.createInGameWindow(options);
```

This will return a `RenderWindow`, read more about them in-depth [here](/windows/render-windows).

<Warning>
  If you want to render the same window in-game and out-of-game, you'll need to create the window twice, once with
  `createInGameWindow` and once with `createWindow`.
</Warning>

## Active Game Info

The `getActiveGameInfo` method returns useful information like if the overlay is connected to the game, the game's
resolution, etc.

```typescript theme={null}
overlay.windows.getActiveGameInfo();
```

## Production Site URL

Get the production site URL configured in your [Overlayed Dashboard](https://overlay.dev/settings):

```typescript theme={null}
const siteUrl = overlay.windows.getProductionSiteUrl();

browserWindow.loadURL(siteUrl.toString());
```

This is useful for loading your deployed frontend in production while using a local dev server during development.

## Global Window Events

The `windows` object emits the following \*\*global \*\*events:

### Resolution

Listen to when the game changes resolution.

```typescript theme={null}
overlay.windows.on("resolution", (width: number, height: number) => {
	// ...
});
```

### Key Down

```typescript theme={null}
overlay.windows.on("keyDown", (event: KeyboardKeyEvent) => {
	// ...
});
```

### Key Up

```typescript theme={null}
overlay.windows.on("keyUp", (event: KeyboardKeyEvent) => {
	// ...
});
```

### Keyboard Focus

```typescript theme={null}
overlay.windows.on("keyboardFocus", (focus: boolean) => {
	// ...
});
```

### Mouse Down

```typescript theme={null}
overlay.windows.on("mouseDown", (event: MouseButtonEvent) => {
	// ...
});
```

### Mouse Up

```typescript theme={null}
overlay.windows.on("mouseUp", (event: MouseButtonEvent) => {
	// ...
});
```