Stream Deck SDK

Appearance

Property Inspector (UI) ​

Fresh

Source

Elgato Stream Deck SDK - UI

Overview ​

Property Inspectors are HTML web views that let users adjust plugin settings through a dedicated interface in the Stream Deck app.

SOP: Set Up a Property Inspector ​

Step 1: Create the HTML File ​

Create an HTML file in the ui/ directory within *.sdPlugin:

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="sdpi-components.js"></script>
</head>
<body>
  <sdpi-item label="Name">
    <sdpi-textfield setting="name"></sdpi-textfield>
  </sdpi-item>
</body>
</html>

Step 2: Reference in Manifest ​

Set PropertyInspectorPath at the action or plugin level:

json
{
  "Actions": [{
    "UUID": "com.example.my-action",
    "PropertyInspectorPath": "ui/my-action.html"
  }]
}

UI Library: sdpi-components ​

Installation Options ​

Local (Recommended): Download sdpi-components.js alongside your HTML file for offline reliability.

Remote (Development only):

html
<script src="https://sdpi-components.dev/releases/v4/sdpi-components.js"></script>

Available Components ​

CategoryComponents
Inputtextfield, password, textarea, file, color
Selectioncheckbox, radio, select, checkbox-list
Calendardate, time, month, week, datetime-local
Specializedbutton, range, delegate

All components use the setting attribute to auto-bind to action settings.

Communication ​

Use streamDeckClient for Property Inspector to plugin communication:

javascript
const { streamDeckClient } = SDPIComponents;

// Set settings from the UI
streamDeckClient.setSettings({
  name: "John Doe",
  showName: true
});

SOP: Debug the Property Inspector ​

  1. Run streamdeck dev to enable developer mode
  2. Open the Property Inspector in Stream Deck (click an action)
  3. Navigate to http://localhost:23654/ in your browser
  4. Select the Property Inspector from the debuggable pages list
  5. Use Chrome DevTools to inspect elements and debug

WARNING

The Property Inspector must be visible in Stream Deck to appear in the debuggable pages list.

Settings Sync ​

When the Property Inspector updates settings, your plugin receives an onDidReceiveSettings event:

typescript
override onDidReceiveSettings(ev: DidReceiveSettingsEvent<Settings>): void {
  const { name, showName } = ev.payload.settings;
  // React to UI changes
}