> ## Documentation Index
> Fetch the complete documentation index at: https://docs.screenjson.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Svelte component

> Drop ScreenJSONViewer into a Svelte or SvelteKit app.

```svelte theme={null}
<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:

| Prop        | Type                                                           | Default          | Description                                   |
| ----------- | -------------------------------------------------------------- | ---------------- | --------------------------------------------- |
| `document`  | `ScreenJSONDocument`                                           | —                | Pre-loaded document.                          |
| `src`       | `string`                                                       | —                | URL to load from (alternative to `document`). |
| `theme`     | `'light' \| 'dark'`                                            | `'light'`        | Theme.                                        |
| `zoom`      | `number`                                                       | `1`              | 0.5 – 2.                                      |
| `lang`      | `Lang`                                                         | document default | Render language.                              |
| `page`      | `number`                                                       | `1`              | Initial page (1-based).                       |
| `numbered`  | `boolean`                                                      | `false`          | Show scene numbers.                           |
| `paginated` | `boolean`                                                      | `true`           | Show page numbers.                            |
| `corner`    | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `'top-right'`    | Menu position.                                |
| `virtual`   | `boolean`                                                      | `false`          | Virtual scrolling.                            |
| `password`  | `string`                                                       | —                | Decrypt password for encrypted content.       |

## Other exported components

For custom layouts:

```ts theme={null}
import {
  ScreenJSONViewer,
  ViewerVirtual,
  Page,
  Menu,
  MetadataPanel,
  ErrorDisplay,
  PasswordModal,
  VirtualScroller,
} from 'screenjson-ui';
```

## Stores

Three reactive Svelte stores are exported:

```ts theme={null}
import { themeStore, settingsStore, documentStore } from 'screenjson-ui';
import type { Theme } from 'screenjson-ui';

$themeStore = 'dark';
```

## SvelteKit route example

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

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

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