Skip to main content
<script lang="ts">
  import { ScreenJSONViewer } from 'screenjson-ui';
  import type { ScreenJSONDocument } from 'screenjson-ui';

  export let document: ScreenJSONDocument;
  let theme: 'light' | 'dark' = 'light';
</script>

<ScreenJSONViewer {document} {theme} numbered virtual />

​
Component props

ScreenJSONViewer accepts the same options as the JavaScript constructor, bound as props:
PropTypeDefaultDescription
documentScreenJSONDocument—Pre-loaded document.
srcstring—URL to load from (alternative to document).
theme'light' | 'dark''light'Theme.
zoomnumber10.5 – 2.
langLangdocument defaultRender language.
pagenumber1Initial page (1-based).
numberedbooleanfalseShow scene numbers.
paginatedbooleantrueShow page numbers.
corner'top-left' | 'top-right' | 'bottom-left' | 'bottom-right''top-right'Menu position.
virtualbooleanfalseVirtual scrolling.
passwordstring—Decrypt password for encrypted content.

​
Other exported components

For custom layouts: 
import {
  ScreenJSONViewer,
  ViewerVirtual,
  Page,
  Menu,
  MetadataPanel,
  ErrorDisplay,
  PasswordModal,
  VirtualScroller,
} from 'screenjson-ui';

​
Stores

Three reactive Svelte stores are exported: 
import { themeStore, settingsStore, documentStore } from 'screenjson-ui';
import type { Theme } from 'screenjson-ui';

$themeStore = 'dark';

​
SvelteKit route example

// +page.ts
export async function load({ fetch, params }) {
  const doc = await fetch(`/screenplays/${params.slug}.json`).then((r) => r.json());
  return { doc };
}

<!-- +page.svelte -->
<script lang="ts">
  import { ScreenJSONViewer } from 'screenjson-ui';
  export let data;
</script>

<ScreenJSONViewer document={data.doc} theme="dark" virtual />