Skip to content
screenjson

screenjson-ui

Load a ScreenJSON document by URL

Fetch a ScreenJSON file from any reachable URL and render it with screenjson-ui.

Last updated January 2026

Simplest

new ScreenJSONUI({
  element: 'viewer',
  src: 'https://example.com/path/to/screenplay.json',
});

The viewer handles the fetch internally.

With a password for encrypted content

new ScreenJSONUI({
  element: 'viewer',
  src: 'https://example.com/encrypted.json',
  password: 'SharedSecret123',
});

With a custom fetcher

For signed URLs, auth headers, or proxies:

const res = await fetch('/api/screenplay/42', {
  headers: { Authorization: `Bearer ${token}` },
});
const doc = await res.json();

new ScreenJSONUI({ element: 'viewer', document: doc });

CORS

If the document lives on a different origin, the server must send an Access-Control-Allow-Origin header that includes your page’s origin.

Next