Create a project

Pick a folder for your projects

Make one folder for all your overlays, for example Documents\racelink-overlays. Each project becomes a folder inside it.

Open that folder in VS Code with File → Open Folder…, then open a terminal with Terminal → New Terminal or Ctrl + `. The terminal opens in that folder. Without an editor, change to the folder with cd in any terminal.

Create the project

Run in the terminal:

$ npm create @racelink/overlay@latest

It asks a few questions. Answer like this:

1. Ok to proceed? — npm asks this only the first time, before it downloads the project creator. Press y and Enter.
2. Project name — type My HUD. The name gives the folder and the overlay id my-hud (lowercase letters, digits and dashes); players see the name My HUD. The name can change later, the id cannot.
3. Description — the description for players. You can leave it empty and press Enter: the template’s description is used, and you change it later.
4. Template — choose 1 (vanilla-ts, TypeScript without a framework). The whole guide follows it.

The terminal shows something like this (your version and path will differ):

Need to install the following packages:
@racelink/create-overlay@2.9.0
Ok to proceed? (y) y

? Project name (my-overlay): My HUD
? Description (optional):
? Template:
  1) vanilla-ts  TypeScript, no framework
  2) react-ts    React
  Choose 1 or 2 (1): 1
Created My HUD in C:\Users\you\Documents\racelink-overlays\my-hud

Next steps:
  cd my-hud
  npm install
  npm run dev        # live preview; the project appears in Racelink Studio
  npm run build      # package for the Workshop

Install the dependencies

Go into the project folder and install the packages it depends on:

$ cd my-hud

$ npm install

npm downloads the Racelink SDK, Vite and TypeScript into node_modules and records the exact versions in package-lock.json. It takes up to a minute. It ends with lines like added 17 packages and found 0 vulnerabilities; lines about npm fund and npm warn do no harm, an error looks like npm error.

Now open the project folder my-hud itself in the editor: File → Open Folder…. From here on, every command runs in it.

What is in the project

racelink.overlay.json

The manifest: id, name, version, category, games, window size and settings. Racelink reads it first. The settings step covers it in detail.

index.html

The overlay’s page. It holds only an empty #root container and loads src/main.ts.

src/main.ts

The overlay’s code: it connects to Racelink and draws throttle and brake bars, the gear and the speed. Most of your work happens here.

src/style.css

The overlay’s styles.

src/racelink-settings.ts

Types and default values of the settings, generated from the manifest. Do not edit it by hand: changes are overwritten.

preview/

Images for the overlay’s Steam Workshop page. preview/preview.png is the main image; an overlay cannot be published without it. Up to 9 more images go in preview/screenshots/: players browse them on the overlay’s page to see it at work. For now the folder holds only a README — the publishing step adds the images: make them in any image editor, or capture the main one in Racelink Studio.

package.json

The project name, its dependencies and its commands: dev, build, validate.

vite.config.ts, tsconfig.json

Vite and TypeScript settings. The racelinkOverlay() plugin in vite.config.ts connects the project to Racelink. You rarely need to touch them.

README.md, AGENTS.md, CLAUDE.md

README is a short note on the commands. AGENTS.md and CLAUDE.md are instructions for AI assistants; if you do not use one, ignore them.

node_modules/

The installed packages. Do not edit or publish them: npm install always recreates the folder.

If something goes wrong

• already exists and is not empty — a folder with that name exists and is not empty. Type another name or delete the old folder.
• EACCES or EPERM — you cannot write to this folder. Pick a folder in your profile, for example in Documents.
• ENOTFOUND, ETIMEDOUT — npm could not reach the internet. Check the connection, VPN or proxy and run the command again.
• An error in the middle of npm install — delete node_modules and run npm install again.