hub / github.com/GeekyEggo/sdpi-components

github.com/GeekyEggo/sdpi-components @v4.0.1

repository ↗ · DeepWiki ↗ · release v4.0.1 ↗ · + Follow

593 symbols 1,198 edges 70 files 94 documented · 16%

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

sdpi-components

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
📦 Example
🪶 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.

<script src="https://sdpi-components.dev/releases/v3/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://sdpi-components.dev/releases/v3/sdpi-components.js"></script>
</head>
<html>
    <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>

🪶 Components

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

Extension points exported contracts — how you extend this code

IFocusable (Interface)

(no doc) [3 implementers]

src/mixins/focusable.ts

IEventSubscriber (Interface)

(no doc) [2 implementers]

src/core/events.ts

HTMLElementTagNameMap (Interface)

(no doc)

src/components/textfield.ts

Window (Interface)

(no doc)

src/typings/global.d.ts

IInput (Interface)

(no doc)

src/mixins/input.ts

IEventDispatcher (Interface)

(no doc) [2 implementers]

src/core/events.ts

HTMLElementTagNameMap (Interface)

(no doc)

src/components/range.ts

IEventHandler (Interface)

(no doc)

src/core/events.ts

Core symbols most depended-on inside this repo

e$3

called by 36

example/pi/sdpi-components.js

src/core/localized-message.ts

i$5

called by 18

example/pi/sdpi-components.js

example/pi/sdpi-components.js

e$4

called by 15

example/pi/sdpi-components.js

getMessage

called by 13

src/core/i18n.ts

Shape

Method 326

Class 158

Function 87

Interface 21

Enum 1

Languages

TypeScript100%

Modules by API surface

example/pi/sdpi-components.js372 symbols

src/mixins/data-sourced.ts13 symbols

src/stream-deck/stream-deck-client.ts12 symbols

src/core/events.ts11 symbols

src/core/utils.ts10 symbols

src/core/localized-message.ts10 symbols

src/mixins/focusable.ts8 symbols

src/components/select.ts8 symbols

src/stream-deck/settings.ts7 symbols

src/controllers/filtered-mutation-controller.ts7 symbols

src/mixins/persisted.ts6 symbols

src/core/promises.ts6 symbols

For agents

$ claude mcp add sdpi-components \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact

github.com/GeekyEggo/sdpi-components @v4.0.1

sdpi-components

✏️ Getting Started

📦 Example

🪶 Components

Extension points exported contracts — how you extend this code

Core symbols most depended-on inside this repo

Shape

Languages

Modules by API surface

For agents

Ask about this repo answers extend the page