Run the overlay

Start the dev server

Start Racelink. Then, in the editor’s terminal in the my-hud folder, run:

$ npm run dev

> my-hud@1.0.0 dev
> vite

  VITE v8.3.5  ready in 253 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
[racelink] Connected to Racelink Studio as dev:my-hud.

Vite started a dev server at http://localhost:5173/, and the line [racelink] Connected to Racelink Studio means Racelink found the project.

While the server runs, the terminal stays busy: the command does not finish, and that is expected. Keep it open. For other commands open a second terminal with the + button on VS Code’s terminal panel. To stop the server press Ctrl + C in its terminal.

Open the overlay in a browser

Open http://localhost:5173/ in a browser. You see the template’s overlay: throttle and brake bars, the gear and the speed. In a browser it fills the whole window — that is fine, in Racelink it gets its own size.

What the overlay shows:

• With a game running and you driving, the overlay shows live data from it.
• Without a game the overlay stands still: gear N, speed 0, empty bars. That is not an error — Racelink simply has nothing to send.
• With Racelink closed, the page switches to demo data by itself.

To bring the overlay to life without a game, turn on demo data: add ?demo to the address — http://localhost:5173/?demo. A car drives laps, pedals and gears change, so you can build an overlay without any game at all.

Each game has its own demo, because games give different data: the Assetto Corsa Rally demo has no track map or opponents, Le Mans Ultimate has virtual energy that other games lack. Plain ?demo shows the demo of the game selected in Racelink, or iRacing’s with Racelink closed. To check the overlay on a particular game without switching it in Racelink, put the game after =:

• ?demo=iracing — iRacing
• ?demo=le-mans-ultimate — Le Mans Ultimate
• ?demo=assetto-corsa — Assetto Corsa
• ?demo=assetto-corsa-evo — Assetto Corsa EVO
• ?demo=assetto-corsa-rally — Assetto Corsa Rally

For example, http://localhost:5173/?demo=assetto-corsa-rally shows how the overlay looks on a rally stage. An unknown game name is not an error: the page shows the same demo as plain ?demo.

Find the project in Racelink Studio

In Racelink open Studio. The Projects list now has My HUD marked dev server is running. Select it: Studio shows the overlay itself on demo data and the project’s path — develop, build, check, preview, publish. The next steps of the guide follow that path.

Put the overlay on screen

1. Open Layouts and press Add.
2. In Add an overlay find My HUD — search by name or look in the Controls and gauges category. It is marked In development.
3. Press Add. The overlay appears on screen above other windows, at the 360 × 120 size from the manifest. Drag it where you like, then press Finish editing.

It is the same overlay as in the browser: both load the code from the dev server, so they update together.

Try live reload

Open src/style.css, find the .gear rule and add a colour:

.gear {
  font-size: clamp(24px, 45cqh, 120px);
  line-height: 1;
  color: #ff7a1a;
}

Save the file (Ctrl + S). The gear number turns orange at once, in the browser and on screen — no restart, no page reload. That is how you will work from now on: change the code, save, look. Keep the colour or change it back.

When the server is stopped

After Ctrl + C the overlay stops updating, and the project marked In development disappears from Add an overlay. Until the project is built (the “Build and check” step), Racelink shows it only while npm run dev runs. To carry on, run npm run dev again.

If something goes wrong

• The address is not 5173. If the port is taken, Vite uses the next one — 5174 and so on. Open the address from the Local: line in the terminal.
• The project is not in Studio. Make sure the full version of Racelink runs, and look at the terminal: the line Racelink did not accept the dev server gives the reason.
• A blank page. Look for errors in the server’s terminal and in the browser console (F12 → Console). Most often it is a typo in the file you changed last.