connecting...
input overlay configurator
instructions
  1. install input-overlay plugin in obs
  2. enable websocket server in plugin settings (not obs websocket, the plugin one)
  3. check the port number (usually 16899)
  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
    • tip: you can also load previously saved urls using load url button
connection
custom layout
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)
| multi-key binding separator key_w|key_c:"C"
live preview
style & animation
24px
8px
1.05x
1.0x
1.0x
100%
100%
patch notes

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.