connecting...
input overlay configurator
instructions [ ! ]

Option #1 (recommended)

  1. get the input-overlay-ws server
  2. put it somewhere on your computer and run it
  3. right click on the tray icon and copy the auth token
  4. enter the auth token in the connection section (address and port can stay default)
  5. edit the overlay to your desire
  6. copy the overlay url (⎘ copy url)
  7. create a new browser source in obs (or any other streaming software)
  8. paste the url into the browser source
    • tip: you can also edit the config.json to set a custom address and port for the input-overlay-ws to use
    • tip: you can also load previously saved urls using load url button

Option #2

  1. install input-overlay plugin in obs
  2. enable websocket server in plugin settings (not obs websocket, the plugin one)
  3. check the address and port (usually its fine when its default, authentication is not possible so leave it empty)
  4. restart obs
  5. copy the overlay url (⎘ copy url)
  6. create a new browser source in obs
  7. paste the url into the browser source
    8. 🛈 while this method is easier since you dont have to worry about running the separate ws server, it lacks authentication.
cheat sheet

key naming conventions

use the internal name when defining a key in your custom layout string. the basic syntax is:

🛈 comma separated for multiple keys
[internal_name]:"[label]":[width class]

multi-key bindings

you can bind multiple keys to the same visual element using the pipe | separator:

key_w|mouse_4:"W" - both W and mouse4 activate the same element
key_q|key_e:"use" - both Q and E show "use"
key_c|key_leftcrtl:"duck" - both C and CTRL show "duck"

standard keys (a-z, 0-9, and symbols)

label example internal name
a - z key_a - key_z
0 - 9 key_0 - key_9
` (tilde) key_backtick
- (minus) key_minus
= (equals) key_equals
[ (open bracket) key_openbracket
] (close bracket) key_closebracket
\ (backslash) key_backslash
; (semicolon) key_semicolon
' (apostrophe) key_apostrophe
, (comma) key_comma
. (period) key_period
/ (slash) key_slash

control & special keys

label example internal name
esc key_escape
tab key_tab
caps key_capslock
shift (left/right) key_leftshift, key_rightshift
ctrl (left/right) key_leftctrl, key_rightctrl
alt (left/right) key_leftalt, key_rightalt
win/meta (left/right) key_leftwin, key_rightwin
space key_space
enter key_enter
backspace key_backspace
menu key_menu

function & utility keys

label example internal name
f1 - f12 key_f1 - key_f12
prtscn key_printscreen
scrlck key_scrolllock
pause key_pause
ins key_insert
del key_delete
home / end key_home, key_end
pgup / pgdn key_pageup, key_pagedown
arrows key_leftarrow, key_uparrow, key_rightarrow, key_downarrow

numpad keys

label example internal name
numlock key_numlock
/ * - + key_numpad_divide, key_numpad_multiply, key_numpad_subtract, key_numpad_add
7 - 9 key_numpad_7, key_numpad_8, key_numpad_9
4 - 6 key_numpad_4, key_numpad_5, key_numpad_6
1 - 3 key_numpad_1, key_numpad_2, key_numpad_3
0 . enter key_numpad_0, key_numpad_decimal, key_numpad_enter

mouse and scroller identifiers

label example internal name / type
m1 (left) mouse_left
m2 (right) mouse_right
m3 (middle/wheel) mouse_middle
m4 mouse_4
m5 mouse_5
scroller display scroller:"default":"up":"down" (3 labels required)
side button combo mouse_side:"m5":"m4" (2 labels required)

width classes

use these for the optional [width class] part of the key definition:

🛈 u0-01 to u7 - increments of 0.01u available
class name width notes
(none) 1u default width for all keys
u1-25 1.25u common for ctrl, alt on some layouts
u1-5 1.5u common for tab, ctrl, alt
u1-75 1.75u common for caps lock
u2 2u common for shift, backspace, enter
u2-25 2.25u common for larger shift keys
u2-47 2.47u optimized for mouse buttons
u3 3u used for compact space bars
u3-33 3.33u balanced space bar size
u6-25 6.25u full size space bar
mouse-wide special optimized width for wide mouse buttons
invisible 1u key exists for press detection but is hidden. supports width classes like u2
dummy none placeholder to skip positions without creating visible elements

special syntax

syntax description example
invisible creates an invisible spacer invisible or with width: key_escape:"invis":u2
dummy empty row placeholder dummy (used to remove rows, this is done for backwards compatibility reasons with older links that didnt have custom rows yet)
| multi-key binding separator key_w|key_c:"C"
patch notes

2025-12-27

new server

  • added a very simple ws server which supports authentication and can be used without obs or with other recording software that supports browser sources. the input-overlay obs plugin will continue to work as before if you wish to continue using it

    • bug fixes

    • fix keys not activating when having the same key configured multiple times

    quality of life

    • added a presets dropdown
    • added ability to use img tags in key labels
    • added a + button to add new keys. this should be easier to use for most people

    2025-12-06


    bug fixes

    • fix mouse_4 and mouse_5 elements
    • fix oversight in unpress logic causing wrong held keys to be unpressed

    2025-12-04


    bug fixes

    • fix mouse element scaling

    new config variables

    • added key gap modifier
    • added bold font checkbox

    quality of life

    • invisible keys now support width classes (key_escape:"invis":u2-25)

    2025-12-03


    bug fixes

    • fix scale scaling wrong document element
    • fix mouse buttons not working outside the mouse row
    • fix fonts

    quality of life

    • added a wider range of width classes (see cheat sheet)
    • mouse buttons support width classes including scroller

    2025-12-02


    bug fixes

    • fix color pickers not updating when loading settings from url
    • fix copy button label inconsistency
    • fix text not being selectable

    quality of life

    • add url cfg compression to save 50% size, legacy params should continue to work fine
    • add "edit this layout" button inside the overlay mode that shows on mouse hover
    • rework how key states are handled to compare against an array of previous websocket messages to prevent stuck keys on unfocused or busy (lagging) browser src
    • make sheet flyouts smaller

    2025-12-01


    bug fixes

    • fix scroll label scale for good (?)
    • fix sheet flyouts
    • fix cheat sheet not scrolling
    • fix speed suffix being x instead of %

    quality of life

    • added settings loading from url to allow sharing and loading of previously configured urls
    • url bar now updates on settings change, this is useful to share unfinished configurations (obs url still needs to be obtained through the copy button)

    2025-11-30


    bug fixes

    • fixed mouse label not scaling correctly inside its element.
    • added a dedicated "dummy" string to remove rows without needing invisible tags.

    quality of life

    • added patch notes viewer.
    • added glow highlight indicating when the url has been updated.
    • separated scroll-up and scroll-down into distinct combo options.
    • mouse preview now works everywhere on the page.
    • default scroll arrows updated to a thicker style.

    custom mouse row

    • added fully customizable mouse row.
    • implemented wide left mouse button: mouse_left:"m1":mouse-wide.
    • added improved 3-label scroller: scroller:"-":"↑":"↓".
    • added right mouse button: mouse_right:"m2".

    cheat sheets

    • added cheat sheet support for custom configuration elements.

    key styling

    • refactored internal key width styling system.
    connection
    custom layout
    live preview
    style & animation
    24px
    8px
    1.05x
    1.0x
    100%