Skip to content
screenjson

screenjson-ui

Embed screenjson-ui in Svelte

Drop the native Svelte component into a SvelteKit app, with type-safe props and reactive theme switching.

Last updated January 2026

Install

npm install @screenjson/ui

Use the component

<script lang="ts">
  import { ScreenJSONViewer } from '@screenjson/ui';
  import type { ScreenJSONDocument } from '@screenjson/ui';

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

<div class="wrap">
  <header>
    <button on:click={() => (theme = theme === 'light' ? 'dark' : 'light')}>
      Toggle theme
    </button>
  </header>
  <ScreenJSONViewer {document} {theme} numbered virtual />
</div>

<style>
  .wrap { height: 100vh; display: flex; flex-direction: column; }
  :global(.screenjson-viewer) { flex: 1; }
</style>

Load from a URL in a route

<!-- +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} />

Next