Before you start

What an overlay is

An overlay is a small web page. Racelink shows it in a transparent window above the game (clicks pass through it) and feeds it live race data: speed, pedals, positions, lap times, fuel, weather. The data comes in the same fields and units for every supported game — speed in km/h, pedals from 0 to 1, times in seconds — so one overlay works in every game.

You write an overlay like an ordinary website: HTML and CSS for the look, TypeScript for the logic. You publish the finished overlay to the Steam Workshop, and players add it to their layouts just like Racelink's built-in overlays.

How the work goes

1. Create a project with one command — it shows a working overlay right away.
2. Start the dev server: the overlay appears in Racelink and in a browser and reloads every time you save a file.
3. Show the data you need, add settings and polish the look.
4. Build and check the project, capture a preview and publish it from Racelink Studio.

Every step ends with a “What you should have” check. Do not move on until it passes.

The stack

HTML and CSS

The markup and look of the overlay. Everything a modern browser can do is available: flex and grid, CSS variables, animations, SVG and canvas.

TypeScript

JavaScript with types. Every telemetry field and your settings are typed: the editor suggests field names and underlines a typo at once. If you know JavaScript, that is enough — the guide explains what you need about types as it goes.

Node.js and npm

Node.js runs the development tools on your computer; npm downloads packages and runs the project’s commands. Node.js never ends up in the overlay: players get only the finished HTML, CSS and JavaScript.

Vite

The dev server and bundler. While you work it shows the overlay and updates it the moment you save; before publishing it builds the final files into the dist/ folder.

@racelink/overlay

The Racelink SDK, a library from npm. It connects to Racelink, hands you typed data and settings, generates demo data without Racelink and checks the project before publishing.

racelink.overlay.json

The overlay’s manifest: id, name, version, supported games, window size and the list of settings. Racelink draws your overlay’s settings panel from it.

Racelink Studio

The part of the app for overlay authors. It finds your project, shows the live value of every field, checks the project, captures previews and publishes to the Steam Workshop. It is off until you turn it on in Settings, For developers; until then Racelink accepts no dev server.

What you should know

This guide is for people who can already:

• build a simple page with HTML and CSS;
• use the basics of JavaScript: variables, functions, objects and arrays, arrow functions, import and export;
• open a terminal, change folders with cd and run a command.

You do not need to know beforehand:

• TypeScript — JavaScript is enough;
• npm and Vite — the guide gives every command you need;
• React — the main path of the guide uses plain TypeScript.

Where to brush up:

• MDN: Learn web development ↗ — HTML, CSS and JavaScript from scratch;
• MDN: JavaScript Guide ↗;
• MDN: Command line crash course ↗;
• TypeScript for JavaScript programmers ↗ (5 minutes).

What to install

1. Racelink, the full version, from Steam ↗, on Windows or Linux. The free Racelink Demo adds only built-in overlays to a layout, so you cannot run your own overlay over the game there.
2. Node.js 22 or newer. Download the LTS version from nodejs.org ↗ and install it with the default options. npm comes with Node.js.
3. A code editor. Any will do; we recommend Visual Studio Code ↗: TypeScript support is built in and a terminal opens right in the editor with Ctrl + `.

You do not need the game itself to develop: Racelink and the SDK show demo data. You need the game only to try the overlay in a real race.

Check the installation

Open a new terminal (one opened before you installed Node.js will not find it) and run two commands:

$ node -v
v22.14.0

$ npm -v
10.9.2

The first must print v22 or higher. The second prints any version; your exact numbers may differ.