How To Add To OBS

1. 01

   Connect your controller

   Plug in your controller or pair it over Bluetooth, then press any button. The browser detects standard gamepads automatically and the overlay starts responding to your inputs live.

2. 02

   Pick a layout

   Select the controller that matches the one you hold from the Controller Type dropdown. Built-in layouts cover Xbox, PlayStation, Switch, SNES and more, each positioned for its own diagram so your viewers see exactly what you press.

3. 03

   Style your buttons & sticks

   Choose a button highlight colour, a stick colour and a stick size to match your stream, or apply one of the ready-made presets. Changes appear instantly in the live preview. The translucent button overlays won't appear outside of the website preview, they're in place so you can see the button locations.

4. 04

   Copy your source URL

   Your choices are baked into the Source URL box automatically. Click Copy to grab the OBS URL — it includes the panel=off flag, so the controls panel and advertising banner are hidden on your overlay.

5. 05

   Add it to OBS

   In OBS, add a new Browser source, paste in the copied URL and enter a width of 1920 and a height of 1080. Drag the overlay to wherever you want it in your scene and resize as required.

6. 06

   Done — it remembers

   Because your settings live in the URL, OBS opens the same overlay every time your scene activates — no re-setup needed. To change anything later, come back here, adjust, and copy the fresh URL.

dom.gamepad.enabled = true
privacy.resistFingerprinting = false
dom.gamepad.non_standard_events.enabled = true