Overview

screenjson-ui renders a ScreenJSON document as a pixel-accurate, studio-quality screenplay in the browser. It ships as a small ES module + UMD bundle, drops in via npm or a CDN script tag, and exposes a native Svelte component for SvelteKit projects.

​

Features

• Print-screenplay layout — US Letter, Courier Prime 12pt, industry-standard margins for action, dialogue, character cues, parentheticals, shots, and transitions.
• Light and dark themes — html.dark class strategy, system-preference detection, persisted in localStorage.
• Continuous-scroll pagination — every page rendered in flow, top to bottom; CSS zoom auto-fit shrinks the paper to viewport on narrow windows, user zoom multiplies on top.
• Multi-language — switch the rendered language at runtime via the toolbar or the lang config option.
• Encrypted documents — supply a password (or open the built-in modal) to decrypt AES-256-CTR text runs in-browser.
• Built-in toolbar — title, page count, zoom group, language, info, print, download, theme.
• Metadata panel — overview / characters / scenes drawer.
• Tailwind v4 + CSS variables — easy to re-theme without writing custom CSS.
• Zero framework dependency in the embed API; native Svelte component for SvelteKit users.

​

Distributions

​

Module entry points

​

Rendering standard

Matches the Warner Bros / Final Draft convention used by every major studio:

• Paper: US Letter (8.5” × 11”)
• Font: Courier Prime, 12pt (loaded from Google Fonts; falls back to system Courier)
• Lines per page: 60 maximum
• Margins: Action 1.5” L / 1” R · Dialogue 2.5” L / 2” R · Character 3.7” L · Parenthetical 3.1” L / 2.9” R · Transition 5.8” L

​

Browser support

Chrome 90+ · Firefox 90+ · Safari 14+ · Edge 90+. Uses CSS zoom for paper scaling — works in all four.

​

License

MIT. The viewer is open source — github.com/screenjson/screenjson-ui.