What is ScreenReads
ScreenReads converts a standard screenplay PDF into a dual-layer HTML reading experience. Readers get a cinematic visual layer — styled prose, ambient lighting, header images — alongside the authentic screenplay format, toggled with a single button.
Each screenplay becomes a standalone set of HTML files, deployed as a static website. No database required for the reader. No app to install. It works in any browser.
What You Need
Before you start, make sure you have the following in place. You only set these up once.
Free tier is sufficient. Sign up at netlify.com. You'll deploy your site here by drag-and-drop or CLI.
Download the ScreenReads package and unzip it to a folder on your machine (e.g. C:\Users\You\screen-reads). This is your working directory.
For the ✦ Suggest and ✦ Logline AI features. Get one at console.anthropic.com. Add $5 credit — it covers hundreds of uses. Set as ANTHROPIC_API_KEY in Netlify environment variables.
For AI image generation. Sign up at fal.ai. Top up ~$20 credit (~$0.025 per image). Set as FAL_KEY in Netlify environment variables.
Standard screenplay format (Final Draft, WriterDuet, Fade In exports all work). The editor also accepts .txt, .fountain, and .fdx.
Upload a Screenplay
The Screenplay Editor lives at screen-reads.com/screenplay-editor.html. It must be used from the live site — not opened locally from your PC — because it calls the server-side functions for AI and image generation.
Click the upload card and select your screenplay file. The left panel loads it in Courier format with line numbers. Scene headings (lines starting with INT. or EXT.) are automatically detected and will show a + Chapter button on hover.
Marking Chapters
Hover over any scene heading in the left panel and click + Chapter. A modal opens where you configure the chapter.
Auto-filled from the scene heading. Edit it to something evocative — this is what readers will see.
Controls the ambient lighting colour in the visual layer. Also feeds into the AI image prompt if you use ✦ Suggest.
Describe the image you want, or click ✦ Suggest to have the AI read the next 20 lines and write a prompt for you. Then click ⚡ Generate to create it, or ↑ Upload to use your own.
Once an image is loaded, a scrollable strip of 29 filter presets appears below it. Click any to preview it live. The selected filter is baked into the image when you confirm.
Images & Filters
Images are generated by Flux Dev via fal.ai — a photorealistic AI model tuned for editorial and documentary photography. The style is hardcoded for consistency across all chapters: you control the subject and composition through your prompt.
After generating or uploading, choose from 29 filter presets to grade the image:
Characters
Click the + button in the Characters section of the right panel to add each character. Readers access these via a character card on the title page — clicking opens a modal with portrait, name, role, and bio.
| Field | Notes |
|---|---|
| Name | Full character name as it appears in the screenplay |
| Role | One short phrase — e.g. "The detective", "Danny's mother" |
| Bio | 1–2 cinematic sentences about who they are and what drives them. This is the most important field — make it count. |
| Portrait | Generate via AI or upload your own. Square images work best. |
characters.js and the title page at export time. Adding characters after export requires a re-export.
Exporting
Click the Export button in the top bar to open the export panel. Fill in all fields before downloading.
| Field | Notes |
|---|---|
| Title | Full screenplay title — required, export blocked if empty |
| Slug | URL-safe identifier, e.g. cactus-loop — used for folder names and file paths |
| Writer | Your name as it will appear on the title page and hub card |
| Logline | One punchy sentence. Click ✦ Suggest to generate from the first 400 lines. |
| Genre | Shown as a badge on the hub card |
| Page Count | Shown on the hub card |
| Hub Card Image | Square image shown on the ScreenReads hub. Generate or upload. |
Downloads a ZIP containing all chapter HTML files, the title page, characters.js, all images, and an updated index.html. This is what you deploy.
Generates a single self-contained HTML file with all chapters concatenated — useful as a standalone document to share separately.
index.html with your new screenplay card injected. Before deploying, check this file to make sure any other screenplays that were already on your hub are still present. If they are missing, add their cards back manually before deploying.
Folder Structure
Unzip the exported file and copy the contents into your local screen-reads folder. The structure should look like this:
├── index.html
├── screenplay-editor.html
├── netlify.toml
├── netlify/functions/
│ ├── analyse.js
│ ├── generate.js
│ └── proxy-image.js
├── images/
│ └── card-[slug].jpg
└── [slug]/
├── [slug]-title.html
├── [slug]-ch01.html
├── [slug]-ch02.html ...
├── characters.js
└── images/
├── headers/
└── portraits/
characters.js all live inside that subfolder. The root folder contains only shared files and the hub.
Deploying to Netlify
There are two deploy methods depending on what changed.
Go to app.netlify.com → your site → Deploys. Drag your entire screen-reads folder onto the deploy dropzone. Use this for chapter files, images, and the hub page.
If you've changed any file in netlify/functions/ or netlify.toml, you must use the CLI. Open a terminal in your screen-reads folder and run:
The Hub Page
The hub page (index.html) is the landing page at screen-reads.com. It shows a card for each screenplay. Cards link to the screenplay's title page.
Each card requires: a title, writer, genre, logline, page count, chapter count, and a card image at images/card-[slug].jpg. These are all provided automatically by the ZIP export.
The Tools section (Screenplay Editor, Pipeline, Scroll Tool etc.) is hidden from public view. Press Ctrl+Alt+T on the hub page to toggle it on or off.
Services & Costs
ScreenReads uses four external services. Three are pay-as-you-go with very low costs; one is free.
| Service | Purpose | Cost |
|---|---|---|
| Netlify | Hosting and serverless functions | Free tier sufficient |
| Anthropic | ✦ Suggest, ✦ Logline, Scriptment AI | ~$0.001 per call — $5 covers hundreds |
| fal.ai | Image generation (Flux Dev) | ~$0.025 per image |
| Supabase | Reader scene comments | Free tier sufficient |
Troubleshooting
Common issues and how to resolve them.
| Problem | Fix |
|---|---|
| ✦ Suggest shows ✗ failed | Check Anthropic API credit balance at console.anthropic.com → Billing |
| ⚡ Generate shows ✗ failed | Check fal.ai credit balance at fal.ai dashboard. Also confirm FAL_KEY is set in Netlify env vars without the secret flag. |
| Editor won't load screenplay | Make sure you're using it from the live site, not locally. The functions are server-side only. |
| Netlify deploy auth expired | Run netlify logout then netlify login in your terminal. |
| Hub card missing after deploy | The ZIP's index.html may not have included existing cards. Manually add the missing card back and re-deploy. |
| Images not showing after deploy | Check filenames are lowercase. Image paths are case-sensitive on Netlify. Rename files if needed and re-deploy. |
| Character modal not opening | Check characters.js was included in the ZIP and deployed to the screenplay's subfolder. |
| Scriptment times out | The synthesis call can take up to 26 seconds. If it consistently fails, check netlify.toml includes [functions."analyse"] timeout = 26 and re-deploy via CLI. |