streamdeck-property-inspector

Guide developers in implementing Stream Deck Property Inspectors with sdpi-components.

2|Updated Jan 19, 2026

Search Tags:#debugging #ui-design #plugin-development #stream-deck #sdpi-components #property-inspector

Ready to run

npx skills add https://github.com/FlowingSPDG/skills-streamdeck --skill streamdeck-property-inspector

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: streamdeck-property-inspector
Source: https://github.com/FlowingSPDG/skills-streamdeck/tree/main/skills/streamdeck-property-inspector
Command: npx skills add https://github.com/FlowingSPDG/skills-streamdeck --skill streamdeck-property-inspector

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers building Stream Deck plugins often struggle to implement and wire up Property Inspectors (PI) for per-action configuration UIs. This skill provides a clear, actionable guide to create, structure, and connect Property Inspectors with plugins, reducing boilerplate and errors.

Core Features & Use Cases

Guidance on PI concepts: what a PI is, where to place UI files, and how to reference them in manifest.json.
UI patterns and components: how to use sdpi-components web components to build consistent, accessible interfaces.
Communication workflow: how the PI exchanges settings with the plugin via didReceiveSettings and setSettings patterns.
Use Case: create a property inspector for a sample action to configure simple settings like name and enable state.

Quick Start

Create a Property Inspector HTML file under ui/, add a local sdpi-components.js to the same directory, reference it in your HTML, configure manifest.json with PropertyInspectorPath, and test with Stream Deck's developer tools.

Frequently Asked Questions about streamdeck-property-inspector

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a Stream Deck Property Inspector for my plugin actions?▼

To build a Stream Deck Property Inspector, create an HTML file under a ui/ directory, add a local sdpi-components.js file, reference it in your HTML, and configure PropertyInspectorPath in your manifest.json to enable per-action configuration UI.

What are sdpi-components and how do they work for Stream Deck plugin UI?▼

sdpi-components are web components used to build consistent, accessible Property Inspector interfaces for Stream Deck plugins, reducing boilerplate and UI errors by providing pre-built configuration elements that integrate directly with your local HTML setup.

How does a Stream Deck Property Inspector communicate settings with the plugin?▼

A Stream Deck Property Inspector communicates with the plugin using didReceiveSettings and setSettings patterns, establishing a two-way exchange of configuration data between the PI UI and the plugin across multiple registered actions.

Where do I place Property Inspector UI files in my Stream Deck plugin structure?▼

You place Property Inspector UI files in a dedicated ui/ directory within your plugin project structure, ensuring the local sdpi-components.js is in the same directory as your PI HTML file for proper loading and testing.

Can I configure multiple Stream Deck actions with different Property Inspectors?▼

Yes, you can configure multiple Stream Deck actions with different Property Inspectors by referencing distinct PI HTML files via the PropertyInspectorPath in your manifest.json, enabling unique configuration UIs for each action type.