Skip to main content
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

<script
  src="https://cdn.screenjson.com/ui/screenjson-ui.js"
  data-src="/screenplay.json">
</script>

​
All supported attributes

Every attribute is optional unless noted.
AttributeTypeEquivalent configNotes
data-src (required)stringsrcURL of the ScreenJSON document. data-source is accepted as an alias.
data-themelight | darkthemeInitial theme. Defaults to light.
data-zoomnumberzoomParsed as a float.
data-langBCP 47langOverride the rendered language.
data-virtualtrue | falsevirtualVirtual scrolling.
data-widthCSS length—Container width. Numeric values get px; % suffix preserved.
data-heightCSS 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