# Überblick (https://docs.pixl.lennox.zip/sdk)

> Was das SDK kann und wie du anfängst

Das pixl SDK ist eine kleine JavaScript-Bibliothek, mit der du die Events deines Kanals live in eigenen Widgets nutzt. Es läuft überall, wo ein Browser läuft: als Custom Widget in StreamElements, als Browserquelle in OBS oder auf deiner eigenen Seite.

Du brauchst dafür nur einen [API-Schlüssel](/sdk/api-keys). Den legst du im Dashboard auf der Seite **API & SDK** an.

## Ein kleines Widget [#ein-kleines-widget]

```html
<div id="bits">0</div>

<script src="https://pixl.lennox.zip/sdk/pixl.js"></script>
<script>
  const pixl = new Pixl({ key: 'pixl_DEIN_SCHLÜSSEL' });

  // Alle Bits seit Stream-Start, erst die bisherigen, dann live
  let bits = 0;
  pixl.feed({ since: 'stream', types: ['twitch.cheer'] }, (data) => {
    bits += data.bits;
    document.querySelector('#bits').textContent = bits;
  });

  pixl.on('twitch.follow', (data) => {
    console.log(`${data.username} folgt jetzt!`);
  });
</script>
```

Das SDK verbindet sich von selbst, hält die Verbindung offen und baut sie nach einem Abbruch wieder auf.

<Cards>
  <Card title="Installation" description="SDK per Script-Tag oder npm einbinden" href="/sdk/installation" />
  <Card title="API-Schlüssel" description="Schlüssel anlegen und sicher nutzen" href="/sdk/api-keys" />
  <Card title="Historie + live" description="Alle Events seit einem Zeitpunkt und danach live" href="/sdk/feed" />
  <Card title="StreamElements" description="Schritt für Schritt zum Custom Widget" href="/sdk/streamelements" />
</Cards>

## Was das SDK kann [#was-das-sdk-kann]

- Events live empfangen mit [`pixl.on()`](/sdk/events)
- Bisherige Events abfragen und mit [Historie + live](/sdk/feed) ohne Lücke weiterzählen
- [Chat](/sdk/chat) mit Emotes von Twitch, 7TV, BTTV und FFZ anzeigen und [TTS](/sdk/tts) im Overlay abspielen
- Die Sub-Zahl laut Twitch und den laufenden Spotify-Song lesen
- Alles davon geht auch ohne SDK über die [HTTP-API](/sdk/api)

<Callout title="Mit KI-Assistenten">
  Jede Seite dieser Doku gibt es auch als Markdown für ChatGPT, Claude und andere Assistenten. Wie das geht, steht unter [LLMs](/ai).
</Callout>