JavaScript API

import ScreenJSONUI, { type ScreenJSONUIConfig } from 'screenjson-ui';

const viewer = new ScreenJSONUI({
  element: 'viewer',        // id or HTMLElement
  src: '/screenplay.json',
  theme: 'dark',
  virtual: true,
  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';

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