Multi-Controller Viewer

Quick start

1. 1
   Connect every controller you want to show. Plug each one in over USB, or pair it over Bluetooth, before opening this page.
2. 2
   Press a button on each one. Browsers will not notice a controller until they see its first input, and this applies separately to every controller, not just the first.
3. 3
   Watch the grid fill in. A panel appears for each detected controller automatically, no manual setup needed.
4. 4
   Choose a layout. Pick the grid arrangement that best matches how many players you actually have.

Live multi-controller view

How the grid works

Automatic detection per slot

Each panel corresponds to one connected controller, labelled Player 1 through Player 4 based on the index your browser assigns when it first detects that controller. Disconnecting a controller mid-session clears its panel immediately, and reconnecting it, or plugging in a new one, fills the next open slot automatically without needing to refresh the page.

Layout options

Auto sizes the grid to however many controllers are actually connected right now, two side by side for two players, a three or four panel arrangement as more connect. Forcing a fixed 2 up, 3 up, or 4 up layout is useful when you want a consistent, predictable arrangement on stream even before every player has connected yet, reserving the space rather than having the layout jump around as people join.

Theme

Light and Dark are straightforward viewing preferences. Green screen fills every panel with a flat solid colour specifically for chroma keying out in OBS or a video editor, letting all four controller graphics float directly over your gameplay capture with no background box around any of them.

Each individual panel

Every panel runs its own independent live read of buttons, triggers, and stick position, exactly as if it were the only controller connected. There is no shared state between panels and no performance penalty for running several at once beyond what your browser already handles comfortably for a single controller, since polling four gamepad objects is a trivial amount of additional work compared to rendering actual gameplay alongside it.

Why this matters for co-op and party content

A controller overlay built for one player works fine for solo content, but it becomes the wrong tool the moment a second person picks up a controller. Couch co-op, local party games, and split screen content all genuinely benefit from viewers being able to see what every player is doing at once, not just whoever happens to be the stream's main camera focus. Most gamepad viewer tools, including the overwhelming majority of similar tools elsewhere online, are built around a single active controller with a switcher to flip between them one at a time, which works for diagnostics but actively fights against what a co-op stream actually needs, a continuous, simultaneous view of everyone playing.

Building this as genuinely simultaneous panels, rather than a faster switcher, means a viewer watching a four player party game can follow all four sets of inputs in real time exactly as they happen, which is the actual point of showing controller input on a multiplayer stream in the first place.

Using this as an OBS overlay for co-op streams

Add this page as a Browser Source the same way you would for a single controller overlay, sized wider to comfortably fit your chosen layout, roughly 760 by 280 for a 2 up layout or 760 by 520 for a 4 up grid as reasonable starting dimensions before scaling to fit your canvas. Position it along whichever edge of your layout has the least competing HUD activity, and consider the green screen theme specifically here, since keying out a clean background becomes more valuable, not less, once you are placing multiple panels close together where any visible background box around each one would compound and look cluttered.

If your specific game supports more players than your screen layout has room to comfortably show, it is reasonable to use the 2 up or 3 up forced layout even with four controllers connected, prioritising legibility for the players whose input matters most to your specific content over cramming every connected controller onto screen at a size nobody can actually read.

Connecting multiple controllers by device

Windows and Mac

Each controller pairs independently, over USB or Bluetooth, exactly as a single controller would. There is no special multi-controller pairing mode needed, simply connect each one in turn and press a button on it once connected.

Android phone and tablet

Pair each controller separately in your device's Bluetooth settings, then open this page in Chrome. Most Android devices comfortably support multiple simultaneous Bluetooth controller connections.

iPhone and iPad

Pair each controller in Settings the same way you would pair one, then open this page in Safari. iOS has supported multiple simultaneous controllers since the Gamepad API became available from version 14.5 onward.

Linux

Connect each controller over USB or Bluetooth as normal. Some distributions need a one time udev rule for certain Bluetooth controllers to be recognised at the system level, which applies per controller model rather than per individual unit.

Troubleshooting

Only one panel appears even though I have more than one controller connected

Press a button on each controller individually, since browsers register each one separately on its own first input, and a second controller that has never been pressed will not appear yet even if it is successfully paired or plugged in.

A panel disappeared mid-session

This usually means that specific controller lost its connection, commonly a Bluetooth controller running low on battery or moving out of range. Reconnect it and press a button to bring its panel back.

The layout looks cramped with four controllers connected

Try a forced 2 up or 3 up layout instead of auto, which prioritises a larger, more legible size per panel over fitting every connected controller into the smallest possible space.

Panels are showing in the wrong player order

Player numbering follows the index your browser assigns when each controller is first detected, which is generally based on the order controllers were connected or activated, not a fixed physical port number. Disconnecting and reconnecting in your preferred order before pressing buttons can help establish a more predictable sequence.