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

# App Structure

> Understanding the architecture of an Overlayed app

Overlayed apps are built using an architecture where the Electron/native app loads a website rather than a local file.

## Benefits

This architecture gives a few key benefits:

* **Seamless Updates**: You can release fixes and enhancements to your UI without the user having to get an update
  (which typically requires restarting the entire app)
* **Faster Development**: Speeds up local development when using HMR-enabled technology like Vite or Webpack

## Structure Overview

All Overlayed apps **must** follow the below structure:

### Electron App

The Electron app is responsible for:

* Starting the application
* Managing your windows
* Listening to game events
* Interacting with the OS as needed
* Loading the website at a served URL, **not** via `file://`
  * Locally this can be `localhost:3000`
  * In production, your app will be deployed at `https://your-site.overlayedapps.com`
* Sending data to the website via Electron IPC

### Website

The website that the Electron app loads is responsible for:

* Displaying your UI
* Sending data back to Electron via IPC