Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/geekyeggo/sdpi-components

Web components for your Stream Deck plugin; take the hassle out of the property inspector.
https://github.com/geekyeggo/sdpi-components

property-inspector sdpi streamdeck streamdeck-plugins streamdeck-tools

Last synced: 21 days ago
JSON representation

Web components for your Stream Deck plugin; take the hassle out of the property inspector.

Host: GitHub
URL: https://github.com/geekyeggo/sdpi-components
Owner: GeekyEggo
License: mit
Created: 2020-07-28T14:57:56.000Z (over 4 years ago)
Default Branch: main
Last Pushed: 2024-09-26T13:08:25.000Z (3 months ago)
Last Synced: 2024-11-06T07:40:42.835Z (about 2 months ago)
Topics: property-inspector, sdpi, streamdeck, streamdeck-plugins, streamdeck-tools
Language: TypeScript
Homepage: https://sdpi-components.dev
Size: 4.14 MB
Stars: 24
Watchers: 2
Forks: 3
Open Issues: 2
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md

Awesome Lists containing this project

README

        


  



sdpi-components


[![build-shield]](https://github.com/GeekyEggo/sdpi-components/actions?query=workflow%3Abuild)

[![coverage-shield]](https://github.com/GeekyEggo/sdpi-components/actions?query=workflow%3Abuild)

[![docs-shield]](https://sdpi-components.dev)

[![x-shield]](https://x.com/elgato)

Designed to complement Stream Deck plugins; sdpi-components provides a collection of web components that focuses on the plugin's property inspector, and makes persisting settings consistent, user-friendly, and hassle-free.

-   ✏️ [Getting Started](#%EF%B8%8F-getting-started)

-   📦 [Example](#-example)

-   🪶 [Components](#-components)

## ✏️ Getting Started

Getting started is easy; simply reference the following JavaScript file in your property inspector, and you're ready to start adding [components](https://sdpi-components.dev/docs/components).

```html

```

## 📦 Example

The example below highlights some of the components available; alternatively you can check out the [property inspector](./example/pi/index.html) in this repositories example plugin.

![The property inspector, in the Elgato Stream Deck software, with components from sdpi-components](./assets/example.png "Example of sdpi-components in the property inspector")

```html

    

    

    

        

        

            

        

        

            

        

        

            

                Red

                Green

                Blue

            

        

    

```

## 🪶 Components

To discover all of the components available, check out the [documentation](https://sdpi-components.dev/docs/components).

[![The property inspector with all of the components found in the sdpi-components library](./assets/all-components.png "Some of the components in sdpi-components")](https://sdpi-components.dev/docs/components)

[build-shield]: https://img.shields.io/github/actions/workflow/status/geekyeggo/sdpi-components/build.yml?branch=main&label=Build&logo=GitHub

[coverage-shield]: assets/coverage.svg

[docs-shield]: https://img.shields.io/static/v1?style=flat&message=Documentation&label=&color=orange&logoColor=white&labelColor=grey&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTguOTM4IDguODc1SDE0LjE4OFY3LjYyNUg4LjkzOFpNOC45MzggMTEuODMzSDExLjk3OVYxMC41ODNIOC45MzhaTTguOTM4IDUuOTE3SDE0LjE4OFY0LjY2N0g4LjkzOFpNNy4yMDggMTQuNjI1UTYuMzc1IDE0LjYyNSA1LjgwMiAxNC4wNTJRNS4yMjkgMTMuNDc5IDUuMjI5IDEyLjY0NlYzLjg1NFE1LjIyOSAzLjAyMSA1LjgwMiAyLjQ0OFE2LjM3NSAxLjg3NSA3LjIwOCAxLjg3NUgxNlExNi44MzMgMS44NzUgMTcuNDA2IDIuNDQ4UTE3Ljk3OSAzLjAyMSAxNy45NzkgMy44NTRWMTIuNjQ2UTE3Ljk3OSAxMy40NzkgMTcuNDA2IDE0LjA1MlExNi44MzMgMTQuNjI1IDE2IDE0LjYyNVpNNCAxNy44MzNRMy4xNjcgMTcuODMzIDIuNTk0IDE3LjI2UTIuMDIxIDE2LjY4OCAyLjAyMSAxNS44NTRWNS42MDRIMy40NzlWMTUuODU0UTMuNDc5IDE2LjA2MiAzLjYzNSAxNi4yMTlRMy43OTIgMTYuMzc1IDQgMTYuMzc1SDE0LjI1VjE3LjgzM1oiLz48L3N2Zz4=

[x-shield]: https://img.shields.io/static/v1?style=flat&message=Elgato&logo=X&label=&color=blue&logoColor=white&labelColor=grey