Quick answers before you test
How do I add a controller overlay to OBS?
Pick a style here, copy the URL, then in OBS add a Browser source, paste the URL and the size shown. Untick “Shutdown source when not visible” and press a button once.
Why is my overlay not moving?
Browsers only show a controller to a page after it has been used. With OBS open, press any button on the controller; also make sure the source is not shut down when hidden.
An input display for fighting games?
Choose the arcade style and turn on the input history: every input appears in numpad notation with the frames it was held, as in training mode.
What the result actually measures
The overlay is a page that reads your controller the way any browser can — through the Gamepad API, which OBS’s browser source supports — and draws it every frame: the pressed buttons light, the sticks move, the triggers fill. The arcade style draws a ball-top lever and the eight-button panel, and can list your inputs underneath in numpad notation with the frames each was held, so viewers see the motions behind a combo. Everything is set by the URL, so the overlay needs no account and stores nothing.
Measurement boundary: The overlay reads the controller OBS can see on the streaming computer; a controller connected to a console or another PC is not visible to it. It reads controllers at the browser’s frame rate, so presses shorter than a frame can be missed. Back paddles and extra buttons appear only as the standard buttons they are mapped to.
How to interpret the output
Transparent background
The default: only the controller is drawn, over your gameplay. Choose the dark card for a panel behind it, or green screen if your setup keys colours.
Input history
On the arcade style: the latest inputs, newest first, as direction and buttons with the frames held. 236 then LP is a quarter circle forward into light punch.
Size
The width and height to give the browser source. The overlay scales to whatever box OBS gives it, so you can resize the source freely afterwards.
Troubleshooting unexpected results
The overlay is blank or does not react
Press any button on the controller after OBS has started; untick “Shutdown source when not visible”; and in the source’s properties try “Refresh cache of current page”.
It shows the wrong controller
The overlay follows the controller used most recently. Press a button on the one you play with; disconnect others if two are active at once.
The arcade lever does not move
Set the stick to d-pad mode (DP). The overlay also reads left-stick mode, but not right-stick mode.
A black box appears behind it
Choose the transparent background, and check that the browser source does not have a custom CSS rule setting a background.
Frequently asked questions
Is this controller overlay free?
Yes. It is a page OBS loads like any website: no account, no download, nothing stored. Your settings live in the URL.
Does it work with a PS5 controller in OBS?
Yes, by cable or Bluetooth, as long as Windows sees it. Choose the PlayStation style for matching symbols, or any other style you prefer.
Can I show a hitbox or fight stick input display?
Yes: the arcade style draws the lever and eight buttons, and the input history lists every input in numpad notation with frames held. A leverless controller drives the lever drawing from its direction buttons.
Can viewers see my stick movement?
Yes. On the pad styles both sticks move inside their wells as you play, and the triggers fill as you press them.
