Join the Discord! →

Join hundreds of racers just like you! We love to help answer questions and race together.


How to Create an Overlay for Iracing

This guide shows how to create an overlay for iRacing with clear steps for iRacing drivers - build a live HUD overlay fast and fix common setup issues quickly.

If you’re dealing with how to create an overlay for iracing, the short answer: use an overlay tool (browser source, widget or small app) that reads telemetry or exposes info, then place it over your iRacing display or into your streaming software. You’re in the right place to build one fast.

Quick Answer — how to create an overlay for iracing

Create a small web-based overlay (HTML/CSS) or use a ready app (e.g., CrewChief, SimHub, Overwolf/Streamlabs) that shows telemetry or race info. Add it as a borderless window over iRacing or as a browser source in OBS/Streamlabs and lock its position.

What’s Really Going On

An “overlay” is just a visual layer that shows info (lap times, gaps, fuel, flag status) on top of your game or stream. iRacing doesn’t include flexible custom overlays by default, so you either run a separate app that reads iRacing’s telemetry or use the sim’s shared memory/UDP data and render that data with a browser window or native widget. The simplest approach is a browser source because it’s easy to style and position.

Step-by-Step Fix

  1. Choose your method: use a ready overlay app (SimHub, CrewChief) or build a simple web overlay (HTML + JavaScript). Ready apps are fastest.
  2. If using an app, install it and enable iRacing telemetry in the app settings. Most apps auto-detect iRacing when it’s running.
  3. If building a web overlay, use an iRacing telemetry-to-web bridge like irsdk, SimHub’s HTTP data, or a small UDP-to-WebSocket converter to feed data to a local webpage.
  4. Open the overlay as a borderless window or in OBS/Streamlabs as a browser source. Set width/height and transparency so it sits over the game without blocking important view.
  5. Position and lock: in-game, move the overlay to a tidy spot (bottom-left or top-right). In OBS, use the transform tools to crop and position. Lock it to avoid accidental moves.
  6. Test in practice session: verify values update (lap, gap, flag). If fields are blank, check that telemetry port/settings match between iRacing and your overlay app.

Extra Tips / Checklist

  • Use a browser source if you want quick styling with CSS and easy transparency.
  • Set overlay to “click-through” or use borderless window so you don’t interfere with steering or controls.
  • If streaming, keep critical info out of the center; viewers and race officials prefer clean HUDs.
  • Watch CPU/GPU: animated overlays can cost performance. Use lightweight CSS and limit refresh rate.
  • If data won’t show, check firewall rules — local ports for telemetry can be blocked.

FAQs

Q: Do I need coding skills to make an overlay?
A: No — use apps like SimHub, CrewChief or Overwolf. If you want custom look, basic HTML/CSS is enough.

Q: Can overlays show SR or iRating?
A: iRating is iRacing’s driver skill number. Overlays can show it only if the app queries the iRacing API or your account — most simple overlays won’t fetch that automatically.

Q: Will overlays get me banned or affect SR?
A: No. Overlays that only display telemetry or visuals are allowed. Don’t use anything that gives unfair driver aid beyond what’s visible to others.

Q: How do I make the overlay click-through?
A: In OBS, set the browser source to “Interact” off. For apps, enable their “click-through” or “always on top” with mouse pass-through option.

Short Wrap-Up

Building an overlay for iRacing is usually two steps: get telemetry into an app or webpage, then display it as a transparent window or browser source. Start with a ready app to avoid setup pain, then iterate with CSS or small scripts if you want a custom look. Try it in a practice session and tweak placement before racing.