Device Sizes

The library automatically detects the device type and sets render dimensions accordingly. Use useCanvas() to access the dimensions in your components.

Key Sizes

Device	Key Size (px)
Stream Deck (original)	72 x 72
Stream Deck MK.2	72 x 72
Stream Deck XL	96 x 96
Stream Deck Mini	80 x 80
Stream Deck +	144 x 144
Stream Deck Neo	72 x 72

Encoder Display Sizes (Stream Deck+)

Surface	Size (px)
Encoder display (per action)	200 x 100

Touch Input Notes

The Stream Deck+ touch strip is 800 x 100 across the full device. Touch events are routed per encoder action, so touch coordinates are reported relative to that action's segment.

Stream Deck Neo

Surface	Size (px)
Key	72 x 72

Grid Sizes

Device	Columns	Rows
Stream Deck (original)	5	3
Stream Deck MK.2	5	3
Stream Deck XL	8	4
Stream Deck Mini	3	2
Stream Deck +	4	2
Stream Deck Neo	4	2

Accessing Dimensions

function MyKey() {
  const { width, height, type } = useCanvas();
  // width/height reflect the actual pixel dimensions for this device
  // type is 'key', 'dial', or 'touch'

  return (
    <div style={{ width, height, background: '#000' }}>
      <span style={{ color: 'white', fontSize: 12 }}>
        {width}x{height}
      </span>
    </div>
  );
}

Design Tips

Design for the smallest target size (72x72) and let larger keys have more breathing room.
Use useCanvas() to adapt layouts to different devices.
Text below ~10px fontSize becomes hard to read on 72x72 keys.
Stream Deck XL's 96x96 keys allow for more detailed layouts.
Stream Deck+ 144x144 keys support rich multi-element designs.