JavaScript API

import ScreenJSONUI, { type ScreenJSONUIConfig } from 'screenjson-ui';
import 'screenjson-ui/style.css';

const viewer = new ScreenJSONUI({
  element: 'viewer',           // an id or HTMLElement
  src:     '/screenplay.json',
  theme:   'dark',
  onLoad:       (doc)  => console.log('loaded', doc.title),
  onPageChange: (page) => console.log('page', page)
});

new ScreenJSONUI(config: ScreenJSONUIConfig)

<div id="viewer" style="height: 100vh;"></div>

<script type="module">
  import ScreenJSONUI from 'https://cdn.screenjson.com/ui/screenjson-ui.js';

  new ScreenJSONUI({
    element:   'viewer',
    src:       '/screenplay.json',
    theme:     matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
    zoom:      1,
    lang:      'en',
    numbered:  true,
    paginated: true,
    onLoad:       (doc)  => console.log('loaded', doc.title),
    onPageChange: (page) => console.log('page', page),
    onError:      (err)  => console.error(err)
  });
</script>