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

# Data attributes

> Configure the CDN-embedded viewer from attributes on the script tag — no JavaScript required.

When you drop the CDN build into a page with a `data-src` attribute, the library auto-mounts a viewer for you — no explicit `new ScreenJSONUI(...)` call needed.

## Minimum viable embed

```html theme={null}
<script
  src="https://cdn.screenjson.com/ui/screenjson-ui.js"
  data-src="/screenplay.json">
</script>
```

## All supported attributes

Every attribute is optional unless noted.

| Attribute                 | Type              | Equivalent config | Notes                                                                  |
| ------------------------- | ----------------- | ----------------- | ---------------------------------------------------------------------- |
| `data-src` (**required**) | string            | `src`             | URL of the ScreenJSON document. `data-source` is accepted as an alias. |
| `data-theme`              | `light` \| `dark` | `theme`           | Initial theme. Defaults to `light`.                                    |
| `data-zoom`               | number            | `zoom`            | Parsed as a float.                                                     |
| `data-lang`               | BCP 47            | `lang`            | Override the rendered language.                                        |
| `data-virtual`            | `true` \| `false` | `virtual`         | Virtual scrolling.                                                     |
| `data-width`              | CSS length        | —                 | Container width. Numeric values get `px`; `%` suffix preserved.        |
| `data-height`             | CSS length        | —                 | Container height. Numeric values get `px`; `%` suffix preserved.       |

The auto-mount only fires for script tags whose `src` matches `*screenjson*` and that carry `data-src`.

## Query parameters

Alternatively, a `?src=<url>` parameter on the current page URL is also picked up if no `src` is supplied in config. Useful for embedding a viewer on a dedicated page:

```
https://viewer.example.com/?src=https://cdn.example.com/screenplay.json&theme=dark
```