// OVERLAY API
Build overlays for Racelink
An overlay is a small web page. Racelink gives it normalized live data from every supported sim, a settings panel generated from its manifest and a way to the Steam Workshop.
- 01
Create
npm create @racelink/overlay@latestPick plain TypeScript or React. The project runs right away.
- 02
Develop
npm run devnpm run dev: the overlay appears in Racelink and reloads on every change. Without the app, the SDK generates demo data.
- 03
Publish
npm run buildRacelink Studio checks the overlay, captures its preview and publishes it to the Steam Workshop. Subscribers get updates automatically.
// TYPESCRIPT
Read telemetry
One data model
Speeds in km/h, pedals 0–1, times in seconds — the same fields in every sim.
Settings from the manifest
Declare settings in racelink.overlay.json and Racelink draws the panel.
Typed from end to end
Telemetry and settings are typed; the field reference documents every value.
Made for AI assistants
Projects include AGENTS.md and a complete guide for coding assistants.
import { createOverlay } from '@racelink/overlay';
import { defaultSettings, type Settings } from './racelink-settings';
const overlay = createOverlay<Settings>({ defaults: defaultSettings });
overlay.on('telemetry', ({ car, session }) => {
// Normalized for every sim: km/h, pedals 0..1, seconds.
draw(car.speedKph, car.throttle, session.lap);
});