Web Overlay

Setup Guide

A guide to setting up the development environment for the web-overlay project.

1. Visual Studio Installation

Download & Install

  1. Visit Visual Studio Downloads
  2. Download Visual Studio 2026 Community Edition (free) Download visual studio
  3. Run the installer

Configure Workload

  1. In the Visual Studio Installer, select "Desktop development with C++"
  2. Click Install and wait for completion (this usually takes over 15 minutes)

Configure Workload

2. CMake Installation

  1. Visit CMake Downloads
  2. Download the Windows x64 Installer (.msi file)
  3. Run the installer
  4. Important: During installation, select "Add CMake to the system PATH for all users"
  5. Complete the installation

Verify Installation

Close any open terminals and open a new PowerShell window, then run:

cmake --version

You should see the CMake version number.

3. Visual Studio Code Installation

  1. Visit VS Code Downloads
  2. Download and run the Windows installer

4. Ninja Build System

Open PowerShell and run:

winget install Ninja-build.Ninja

Verify Installation

Close and reopen PowerShell, then run:

ninja --version

5. Bun Installation

In PowerShell, run:

powershell -c "irm bun.sh/install.ps1 | iex"

Verify Installation

Close and reopen PowerShell, then run:

bun --version

6. Rust Installation

  1. Visit Rust Installation
  2. Download rustup-init.exe (X64)
  3. Run the installer and follow the prompts (default installation is recommended)
  4. Wait for the installation to complete

Verify Installation

Close and reopen PowerShell, then run:

rustc --version
cargo --version

7. Git Installation

In PowerShell, run:

winget install Git.Git

Configure Git (First Time Setup)

Close and reopen PowerShell, then configure your identity:

git config --global user.name "Your Name"
git config --global user.email "youremail@here.com"

Verify Installation

git --version

8. Clone the Project

  1. Navigate to your desired project directory:
cd C:\repos  # or wherever you want to store the project
  1. Clone the repository:
git clone https://github.com/nopjo/web-overlay
cd web-overlay

9. Visual Studio Code Setup

  1. Open the project in VS Code:
code .

  1. When prompted, install all recommended extensions. The project includes:

    • C/C++ Extension Pack
    • CMake Tools
    • Rust Analyzer
    • And other recommended extensions

    Download Extensions

  2. If no notification pops up to install the recommended extensions you can go to the extensions icon on the left sidebar and it should show the suggested extensions there.

  3. Wait for all extensions to install completely

10. Build the C++ Application

You have two options for building: Visual Studio Code (recommended) or Visual Studio IDE.

Configure CMake

  1. At the bottom of VS Code, look for the CMake status bar
  2. Click on the build configuration and select X64-Release

Build the Project

  1. Click the Build button at the bottom status bar, or
  2. Press F7, or
  3. Open the Command Palette (Ctrl+Shift+P) and run: CMake: Build

Option B: Build with Visual Studio IDE

  1. Open Visual Studio
  2. Select "Open a local folder"
  3. Navigate to your src-cheat folder and open it
  4. Visual Studio will automatically detect the CMake project
  5. At the top, select x64-Release from the configuration dropdown
  6. Click Build → Build All or press Ctrl+Shift+B

Expected Output

The build process should complete without errors. The executable will be located in:

src-cheat/out/x64-release/bin/web-overlay.exe

11. Build the Tauri Frontend

Install Dependencies

Open the terminal in VS Code and run:

bun install

Testing the UI

bun run tauri dev
  • It will take a while first time since it will be building all the Rust dependencies
  • The UI will then be running. Follow the instructions below to actually test the overlay

UI Running

12. Testing the Overlay

Test with Paint

  1. Open Paint (Win+R, type mspaint, press Enter)
  2. Run the executable by pressing the play button at the bottom in Visual Studio Code or Press the run button in Visual Studio 2026
  3. The overlay should appear over Paint's window (default key to open menu is Insert)

Setup Done

Need help? Open an issue on GitHub or contact me directly on Discord (jonahw / 315412038455132160)

What is Web Overlay

An open source template for building game overlays with a modern web-based UI.

How it Works

A high-level overview of how the C++ backend, Tauri, and React UI connect together.

On this page

1. Visual Studio InstallationDownload & InstallConfigure Workload2. CMake InstallationVerify Installation3. Visual Studio Code Installation4. Ninja Build SystemVerify Installation5. Bun InstallationVerify Installation6. Rust InstallationVerify Installation7. Git InstallationConfigure Git (First Time Setup)Verify Installation8. Clone the Project9. Visual Studio Code Setup10. Build the C++ ApplicationOption A: Build with Visual Studio Code (Recommended)Configure CMakeBuild the ProjectOption B: Build with Visual Studio IDEExpected Output11. Build the Tauri FrontendInstall DependenciesTesting the UI12. Testing the OverlayTest with Paint