Your First Changes

Fresh

Source

Elgato Stream Deck SDK - Your First Changes

Overview

The default scaffolded plugin includes an IncrementCounter action. This guide walks through modifying it to understand the development workflow.

Default Counter Behavior

The IncrementCounter class implements two key methods:

Method	Trigger	Default Behavior
onWillAppear	Action appears on canvas	Displays current count
onKeyDown	User presses the key	Increments count by 1

SOP: Modify the Counter

Step 1: Change to Doubling Logic

Update onKeyDown to double the count instead of incrementing:

override async onKeyDown(ev: KeyDownEvent<Settings>): Promise<void> {
  let { count = 0 } = ev.payload.settings;

  if (count === 0) {
    count = 1;
  } else {
    count = count * 2;
  }

  await ev.action.setSettings({ count });
  await ev.action.setTitle(`${count}`);
}

Step 2: Add Reset at Threshold

Add a condition to reset at 256:

if (count >= 256) {
  count = 0;
}

Step 3: Build and Test

With hot-reload:

npm run watch  # Already running? Changes apply automatically

Manual build:

npm run build
streamdeck restart com.elgato.hello-world

SOP: Debug with VS Code

1. Open VS Code in your plugin directory
2. Press Ctrl+P (or Cmd+P on macOS)
3. Type Debug: Attach to Node Process
4. Select the node20 process from the list
5. Set breakpoints and step through your code

INFO

The debugger attaches to the Node.js process running your plugin backend. You can inspect variables, set breakpoints, and step through event handlers.

Verification Checklist

• [ ] Counter now doubles on each press
• [ ] Counter resets to 0 at 256
• [ ] Hot-reload reflects changes without manual restart
• [ ] VS Code debugger attaches successfully