Minimum viable page
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Screenplay</title>
</head>
<body>
<div id="viewer" style="height: 100vh;"></div>
<script
src="https://unpkg.com/@screenjson/ui/dist/screenjson-ui.js"
data-src="/screenplay.json"
data-theme="light"
data-width="900">
</script>
</body>
</html>The data-* attributes are the same set as the constructor options —
data-src, data-theme, data-width, data-height, data-virtual.
With the JS API
If you want control — custom callbacks, programmatic navigation, dynamic document loading — use the constructor directly:
<div id="viewer" style="height: 100vh;"></div>
<script src="https://unpkg.com/@screenjson/ui/dist/screenjson-ui.js"></script>
<script>
const viewer = new ScreenJSONUI({
element: 'viewer',
src: '/screenplay.json',
theme: 'light',
virtual: true,
onLoad: (doc) => console.log('Loaded', doc.title),
onPageChange: (page) => console.log('Page', page),
});
</script>With an inline document
For fully client-rendered pages:
<script>
const doc = /* your ScreenJSON object */;
new ScreenJSONUI({ element: 'viewer', document: doc });
</script>