Svelte component - ScreenJSON

<script lang="ts">
  import { ScreenJSONViewer } from 'screenjson-ui';
  import 'screenjson-ui/style.css';
  import type { ScreenJSONDocument } from 'screenjson-ui';

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

<ScreenJSONViewer {document} {theme} numbered />

Component props

ScreenJSONViewer accepts the same options as the JavaScript constructor:

Prop	Type	Default	Description
`document`	`ScreenJSONDocument`	—	Pre-loaded document.
`src`	`string`	—	URL to load from (alternative to `document`).
`theme`	`'light' \| 'dark'`	system preference	Initial theme.
`zoom`	`number`	`1`	Manual multiplier on top of auto-fit. 0.5 – 2.
`lang`	`Lang`	document `lang`	Render language.
`numbered`	`boolean`	`false`	Show scene numbers in the margin.
`paginated`	`boolean`	`true`	Show page numbers.
`password`	`string`	—	Decrypt password for encrypted content.
`showMenu`	`boolean`	`true`	Render the built-in toolbar. Set to `false` if your app provides its own chrome.

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.set('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';
  import 'screenjson-ui/style.css';
  export let data;
</script>

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