> ## Documentation Index
> Fetch the complete documentation index at: https://docs.littledemo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript SDK

Add LittleDemo players with a script tag and data attributes.

The SDK scans the page for LittleDemo elements and replaces them with embedded players.

## Fixed demo

```html
<script src="https://littledemo.com/sdk.js"></script>

<div data-littledemo-id="demo_abc123"></div>
```

## Data attributes

```html
<div
  data-littledemo-id="demo_abc123"
  data-littledemo-autoplay="true"
  data-littledemo-loop="true"
  data-littledemo-theme="light"
  data-littledemo-width="800"
  data-littledemo-height="450"
></div>
```

## Control playback

```html
<script>
  LittleDemo.play("demo_abc123");
  LittleDemo.pause("demo_abc123");
  LittleDemo.seek("demo_abc123", 4.5);

  LittleDemo.on("ended", (payload) => {
    console.log("Demo finished", payload);
  });
</script>
```

## Dynamic mode

Add a publishable key to the script tag and use `data-littledemo` without a demo ID.

```html
<script
  src="https://littledemo.com/sdk.js"
  data-littledemo-key="ld_pub_xxx"
></script>

<div data-littledemo></div>
```

The SDK extracts page context and calls the dynamic embed API.