Building CoffeeDraft — From Idea to Launch
How I built a privacy-first screenplay editor
in 6 weeks, and what I learned along the way.
Six weeks ago, CoffeeDraft was just a sketch in my notebook. Today it's live, with real users writing real screenplays. Here's how it happened.
Why I Built This
I was procrastinating on a screenplay when I realized: I was spending more time fighting my tools than actually writing. Highland costs money. Final Draft costs more money. WriterSolo wants my email. None of them just let me write.
Every existing tool seemed to demand something from me before I could put words on a page. An account. A subscription. A cloud sync I didn't ask for. My screenplay draft floating on someone else's server.
"The best time to plant a tree was 20 years ago. The second best time is now." — Chinese Proverb
So I opened VS Code instead of complaining, and started building.
How It Works
CoffeeDraft is built around Fountain — a plain-text markup language for screenplays. Write in simple text with conventions like INT. for scene headings and CHARACTER NAME in caps for dialogue, and it renders into industry-standard screenplay format.
The core features:
- Dual-pane editing — Write Fountain on the left, see formatted screenplay on the right
- Live preview — Changes appear instantly as you type
- Local-first — Your work stays in your browser, never touches a server
- PDF export — Industry-standard formatting, ready to send
- Dark mode — Because screenwriters write at night
No accounts. No cloud. No friction. Open the page and start writing. Your browser's localStorage keeps your work safe between sessions.
Technical Spotlight
Dual-pane scroll sync nearly broke me.
The editor pane and preview pane need to scroll together, but they have completely different heights. A 50-line Fountain file might render to 200 lines of formatted screenplay. Scene headings, action blocks, and dialogue all expand differently.
The sync problem:
Editor line 25 → Preview line ???
Editor line 26 → Preview line ???
Line numbers don't map 1:1
Percentage-based scrolling doesn't work either
After 3 failed attempts, I landed on using `IntersectionObserver` to track which scene heading is currently visible in the editor, then scrolling the preview to match that scene. It's not pixel-perfect, but it's good enough that you don't notice.
I spent two days trying to make scroll sync work by calculating line heights. Don't do this. The DOM lies about heights. Use intersection observers and scene markers instead.
The Fountain parser uses fountain-js with some custom extensions for handling notes and synopses. The preview renderer is pure React — each element type (scene heading, action, dialogue, parenthetical) gets its own component with screenplay-standard margins and formatting.
What It Looks Like
The interface is intentionally minimal. Two panes, a toolbar, nothing else.
Dark mode for late-night sessions, clean PDF output, responsive mobile support
Lessons Learned
Start with Mobile
I built desktop-first, then squeezed it into mobile. Should have been the other way around. The constraints of mobile force better design decisions. By the time I got to responsive layout, I was fighting my own CSS.
Write Tests Earlier
The Fountain parser has edge cases I'm still finding. Dual dialogue. Centered text. Lyrics. A test suite from day one would have saved hours of debugging malformed scene headings.
Scope is Everything
I almost added cloud sync "just in case." Stopped myself. Privacy-first means privacy-first. The feature list you don't build is just as important as the one you do.
The Result
CoffeeDraft is live at coffeedraft.com. It's free, it's private, and it does one thing well: lets you write screenplays without friction.
The numbers:
- Total build time: 6 weeks of evenings and weekends
- Total cost: $12/year for the domain
- First week users: 47
Not bad for a procrastination project.
CoffeeDraft is part of my growing ecosystem of privacy-first writing tools — including FountainFormat for quick conversions and PenDraft for markdown editing. Same philosophy across all of them: your words, your device, no accounts required.