skills.rest
FlowingSPDG
FlowingSPDGCOMMUNITY
Explore all skills by this author →
𝕏@FlowingSPDGGitHub

sdpi-components

Build Stream Deck Property Inspector UIs with sdpi-components web components.

2|Updated Jan 19, 2026
Search Tags:#plugin development#UI components#data sources#sdpi-components#Stream Deck#Property Inspector#settings persistence
One-click install
npx skills add https://github.com/FlowingSPDG/skills-streamdeck --skill sdpi-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sdpi-components
Source: https://github.com/FlowingSPDG/skills-streamdeck/tree/main/skills/sdpi-components
Command: npx skills add https://github.com/FlowingSPDG/skills-streamdeck --skill sdpi-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Comprehensive reference and guidance for building Stream Deck Property Inspector UIs using the sdpi-components library. It streamlines UI development by providing a ready-made component suite, data sources, and clear patterns for local deployment and plugin communication.

Core Features & Use Cases

  • Official UI library for Stream Deck Property Inspectors with web components (sdpi-*) built on Lit.js.
  • Provides a consistent set of components (textfield, select, checkbox, color, calendar, etc.) with automatic settings persistence and plugin communication.
  • Data sources support dynamic population of options from the plugin, enabling real-time updates and hot reloading.
  • Use cases include building robust settings UIs, handling global vs action-scoped settings, and debugging Property Inspector issues.

Quick Start

Include the sdpi-components.js library in your Property Inspector UI, then compose your UI with <sdpi-item> wrappers and sdpi-*. Components bound to settings via the setting attribute. Use SDPIComponents.streamDeckClient for advanced plugin communication as needed.

Frequently Asked Questions about sdpi-components

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

FAQPage Schema
How do I build a Stream Deck Property Inspector UI without writing custom HTML?▼

Include the sdpi-components.js library in your Property Inspector HTML, then compose your UI with <sdpi-item> wrappers and sdpi-* components. Bind components to settings using the setting attribute, and use SDPIComponents.streamDeckClient for advanced plugin communication and data source updates.

Does sdpi-components support dynamic data sources for populating Property Inspector options?▼

Yes, sdpi-components supports data sources for dynamic population of Property Inspector options directly from the plugin. This enables real-time UI updates and hot reloading of select or list components without requiring manual refreshes or static option definitions.

How do I persist global and action-scoped settings in a Stream Deck plugin?▼

sdpi-components handles settings persistence automatically when you bind components using the setting attribute. It manages both global settings and action-scoped settings across action instances, ensuring consistent state synchronization between the Property Inspector and the plugin backend.

What are the integration requirements for adding sdpi-components to a Stream Deck plugin?▼

Integration requires including the sdpi-components.js library as a local asset in your Property Inspector HTML. You must also use YAML frontmatter for configuration and ensure local asset usage rather than CDN links to comply with Stream Deck plugin architecture requirements.

Can I use sdpi-components with Lit.js for Stream Deck plugin development?▼

Yes, sdpi-components is built on Lit.js and provides web components (sdpi-*) specifically for Stream Deck Property Inspectors. You can leverage Lit.js patterns while using the provided component suite for textfields, selects, checkboxes, colors, and calendars.

Related Skills

Explore More Software Engineering Skills→
FlowingSPDGFlowingSPDG
2

streamdeck-property-inspector

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

Community
Basic
FlowingSPDGFlowingSPDG
2

streamdeck-node-plugin

Build, test, and deploy Node.js Stream Deck plugins with the CLI and SDK.

Community
Intermediate
iusztinpauliusztinpaul
487

using-streamlit-custom-components

Install and integrate third-party custom components into Streamlit apps.

Community
Intermediate
frostimefrostime
29

hspa

Build SiYuan plugin UIs as standalone HTML pages loaded in iframes.

Community
Intermediate