Get Started

Getting started is easy; simply reference the following javascript file in your property inspector.

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

tip

If you prefer to learn by example, check out the example in the repository.

Example

Property Inspector HTML
<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="utf-8" />
        <script src="https://sdpi-components.dev/releases/v3/sdpi-components.js"></script>
    </head>
    <body>
        <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>

Result

An example of a property inspector using the sdpi-components library

Settings

Given the above example, the resulting settings would have the following structure

{
    "name": <string>,
    "show_name": <true | false>,
    "fav_color": <"red" | "green" | "blue">
}

info

The path to the Property Inspector file must be defined in your plugin's manifest.json. Read more about this on Elgato's Developer Documentation.

Example​

Result​

Example

Result