Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Install screenjson-ui from npm or via the CDN script tag.
npm install screenjson-ui
import ScreenJSONUI from 'screenjson-ui';
import 'screenjson-ui/style.css';
| Field | Value |
|---|---|
name | screenjson-ui |
version | 1.0.0 |
module | ./dist/screenjson-ui.js (ES) |
main | ./dist/screenjson-ui.umd.js (UMD) |
types | ./dist/index.d.ts |
exports["./style.css"] | Pre-compiled stylesheet — import 'screenjson-ui/style.css'. |
sideEffects | ["*.css"] so bundlers don’t tree-shake the styles. |
<link rel="stylesheet" href="https://cdn.screenjson.com/ui/screenjson-ui.css" />
<script type="module"
src="https://cdn.screenjson.com/ui/screenjson-ui.js"></script>
<script type="module">
import ScreenJSONUI from 'https://cdn.screenjson.com/ui/screenjson-ui.js';
new ScreenJSONUI({ element: 'viewer', src: '/screenplay.json' });
</script>
screenjson.com/viewer/ — drop a file or
paste a URL. Deep-link with ?src=:
https://screenjson.com/viewer/?src=https://example.com/screenplay.json
app.css from Google Fonts:
@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap");
--font-screenplay in your own CSS:
:root {
--font-screenplay: "Courier Prime", "Courier New", monospace;
}
import ScreenJSONUI, {
type ScreenJSONUIConfig,
type ScreenJSONDocument,
type Theme,
type Lang
} from 'screenjson-ui';