/sdpi-components

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

Primary LanguageTypeScriptMIT LicenseMIT

sdpi-components Logo

sdpi-components

build-shield coverage-shield docs-shield

twitter-shield

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

Getting started is easy; simply reference the following JavaScript file in your property inspector, and you're ready to start adding components.

<script src="https://cdn.jsdelivr.net/gh/geekyeggo/sdpi-components@v2/dist/sdpi-components.js"></script>

📦 Example

The example below highlights some of the components available; alternatively you can check out the property inspector in this repositories example plugin.

The property inspector, in the Elgato Stream Deck software, with components from sdpi-components

<!DOCTYPE html>
<head lang="en-gb">
    <meta charset="utf-8" />
    <script src="https://cdn.jsdelivr.net/gh/geekyeggo/sdpi-components@v2/dist/sdpi-components.js"></script>
</head>
<html>
    <body>
        <!--
            Given the following setup, the plugin's settings would look like this:
            {
                "name": string,
                "show_name": true | false,
                "fav_color": "red" | "green" | "blue"
            }
        -->

        <sdpi-item label="Name">
            <sdpi-textfield setting="name"></sdpi-textfield>
        </sdpi-item>

        <sdpi-item label="Show Name">
            <sdpi-checkbox setting="show_name"></sdpi-checkbox>
        </sdpi-item>

        <sdpi-item label="Favorite Color">
            <sdpi-select setting="fav_color" placeholder="Please choose a color">
                <option value="red">Red</option>
                <option value="green">Green</option>
                <option value="blue">Blue</option>
            </sdpi-select>
        </sdpi-item>
    </body>
</html>

🪶 Components

To discover all of the components available, check out the documentation.

The property inspector with all of the components found in the sdpi-components library