{"id":4695,"date":"2026-07-31T12:22:21","date_gmt":"2026-07-31T18:22:21","guid":{"rendered":"https:\/\/cocoalopez.com\/blog\/?p=4695"},"modified":"2026-07-31T12:23:24","modified_gmt":"2026-07-31T18:23:24","slug":"screenwriting-app_website-70-30","status":"publish","type":"post","link":"https:\/\/cocoalopez.com\/blog\/?p=4695","title":{"rendered":"Screenwriting app_website 70\/30"},"content":{"rendered":"\n

<\/a><\/p>\n\n\n\n

Screenwriting app_website 70\/30<\/h1>\n\n\n\n

So I began writing a screenwriting app around two years ago, I’m 41 now so I come back from the text editor era where I would download websites and tweak their html code on notepad. Long story short, Javascript became my go to for almost any tool I could think of. CORS aside…<\/p>\n\n\n\n

I’m a filmmaker and animator who loved Celtx, however when they discontinued their PC app a depression struck, felt like the world was over, what was I gonna do with all those .celtx files and stories that I wanted to film, animate and read.<\/p>\n\n\n\n

Being a tinkerer an oldsk00l, began writing a converter parser for celtx, just to be able to turn it into a pdf locally or a txt\/json type of file.<\/p>\n\n\n\n

TLDR: https:\/\/cocoalopez.com\/script\/<\/a><\/p>\n\n\n\n

V01 was born (It had a drag and drop feature and display, that was all)<\/strong><\/p>\n\n\n\n

\"r\/vibecoding<\/a>
Ugly AF but at least displayed my old celtx files<\/figcaption><\/figure>\n\n\n\n

It was then that I saw the potential, what if I could write my own screenwriting app, that works locally, vanilla javascript, all self contained into a single .html so if needed anyone can save that file and keep writing for the years to come.<\/p>\n\n\n\n

Thought it would be quick, years came by and had it as a side project, spending a few hours at night tweaking it, adding functions, testing, debugging.<\/p>\n\n\n\n

About 4 months later I had the first one with a proper screenplay format parser, basic interaction and something I felt proud of, a page navigation like if you’re scrolling tapping pages on a typing machine. (Most of it is hacked tabbing with <a> anchors and offsets but worked back then.<\/p>\n\n\n\n

V02<\/strong><\/p>\n\n\n\n

\"r\/vibecoding<\/a><\/figure>\n\n\n\n

Coming up with more ideas was the easy part, implementing them was a pain in the ass, but I wondered, what if people could just convert other formats and have them in there as a basic format transfer and review tool, I have no intention on competing with Final Draft or other software, just something you can start working with easily on your phone or computer.<\/p>\n\n\n\n

So I added support to OSF (which almost nobody uses) but still, fountain, fdx, celtx and my own json format.<\/p>\n\n\n\n

Page zoom in zoom out, sticky type of notes and a revisions format to keep everything within the same file.

Half a year more later…<\/p>\n\n\n\n

V11<\/strong><\/p>\n\n\n\n

\"r\/vibecoding<\/a><\/figure>\n\n\n\n

Toolbar I thought was the next natural evolution, plus a minimalistic mode so we can focus on writing only, dark mode and local autosave.<\/p>\n\n\n\n

And one feature I’m really proud of, have you ever wanted to review two documents that are “similar” or do a side by side rewrite and have them autoscroll together so you can see exactly the part you’re working on both sides?<\/p>\n\n\n\n

Sync Scroll Across Windows<\/strong><\/p>\n\n\n\n

Just open two different documents or even the same one on different revisions and have them scroll side by side while you correct it.

V30<\/strong><\/p>\n\n\n\n

\"r\/vibecoding<\/a><\/figure>\n\n\n\n

And just went on, more features, scene navigation, colored revisions, character counter, more polish until we arrived to V74 or release V2.0 Finally gave it a claude fable pass, since my codebase is a huge single file it struggled so I did a functions audit, optimization pass and finished up the last release with.<\/p>\n\n\n\n

Mobile mode, floating toolbar, UI Wizard, multiple autosave slots, draggable toolbar.<\/p>\n\n\n\n

Two and a bit more years later…<\/strong><\/p>\n\n\n\n

\"r\/vibecoding<\/a>
BIG FISH OSF within the UI<\/figcaption><\/figure>\n\n\n\n
\"r\/vibecoding<\/a>
BIG FISH on the Minimal Mode<\/figcaption><\/figure>\n\n\n\n
\"r\/vibecoding<\/a>
BIG FISH on minimal mode<\/figcaption><\/figure>\n\n\n\n

If you feel like trying it out:<\/p>\n\n\n\n

https:\/\/cocoalopez.com\/script<\/a><\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Screenwriting app_website 70\/30 So I began writing a screenwriting app around two years ago, I’m 41 now so I come back from the text editor era where I would download websites and tweak their html code on notepad. Long story short, Javascript became my go to for almost any tool I could think of. CORS […]<\/p>\n","protected":false},"author":1,"featured_media":4698,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"tdm_status":"","tdm_grid_status":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1002],"tags":[],"class_list":["post-4695","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-featured"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2026\/07\/cocoascreenplayv2.0.png?fit=1761%2C981&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9XJix-1dJ","jetpack-related-posts":[{"id":4676,"url":"https:\/\/cocoalopez.com\/blog\/?p=4676","url_meta":{"origin":4695,"position":0},"title":"Cocoa Screenplay v2.1b is LIVE","author":"cgmodeler","date":"June 27, 2026","format":false,"excerpt":"The Massive Cocoa Screenplay v2.1b Update is Live! Welcome to the most comprehensive update to Ijustwannawrite yet. The goal is simple: eliminate formatting distractions so you can focus entirely on the story, while equipping you with every professional tool required from a modern screenwriting suite. Here is the complete breakdown\u2026","rel":"","context":"In "zapatainvita"","block_context":{"text":"zapatainvita","link":"https:\/\/cocoalopez.com\/blog\/?cat=35"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2026\/06\/Captura-de-pantalla-2026-06-27-202521.png?fit=1200%2C703&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2026\/06\/Captura-de-pantalla-2026-06-27-202521.png?fit=1200%2C703&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2026\/06\/Captura-de-pantalla-2026-06-27-202521.png?fit=1200%2C703&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2026\/06\/Captura-de-pantalla-2026-06-27-202521.png?fit=1200%2C703&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2026\/06\/Captura-de-pantalla-2026-06-27-202521.png?fit=1200%2C703&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":2836,"url":"https:\/\/cocoalopez.com\/blog\/?p=2836","url_meta":{"origin":4695,"position":1},"title":"Convert FinalDraft\/CELTX Screenplay PDF to Kindle","author":"cgmodeler","date":"January 3, 2019","format":false,"excerpt":"First: Download \"k2pdfopt\" (alt download)Export your script in PDF format.Open k2pdfopt and import the pdf file (don't worry it won't over write the pdf) Select the following settings all default unless specified here: \"smart line breaks: 0.200\" \"Max Columns 1\" \"re-flow text\" \"erase vertical lines\" \"erase horizontal lines\" \"fast preview\"\u2026","rel":"","context":"In "zapatainvita"","block_context":{"text":"zapatainvita","link":"https:\/\/cocoalopez.com\/blog\/?cat=35"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2019\/01\/convert-finaldraft-celtx-screenplay-pdf-to-kindle.jpg?fit=480%2C360&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":4230,"url":"https:\/\/cocoalopez.com\/blog\/?p=4230","url_meta":{"origin":4695,"position":2},"title":"Procreate Dreams – Better stay dreaming…","author":"cgmodeler","date":"December 4, 2023","format":false,"excerpt":"So I've been a procreate user for several years ever since the first betas and being an animator myself naturally I had to try Dreams out. In one word, \"disappointment\" The few things that I liked: The lasso editing for the timeline and intuitive playback controls, the drag and throw\u2026","rel":"","context":"In "reviews"","block_context":{"text":"reviews","link":"https:\/\/cocoalopez.com\/blog\/?cat=1140"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2023\/12\/image.png?fit=649%2C482&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2023\/12\/image.png?fit=649%2C482&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2023\/12\/image.png?fit=649%2C482&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":1609,"url":"https:\/\/cocoalopez.com\/blog\/?p=1609","url_meta":{"origin":4695,"position":3},"title":"Correr varias instancias de Dropbox en la misma computadora","author":"cgmodeler","date":"January 20, 2013","format":false,"excerpt":"DropboxPortableAHK - Portable Dropbox App. \u00a0 Es una app que hace el Dropbox portable pero funciona tambi\u00e9n para correr varias instancias del Dropbox con diferentes cuentas en un mismo pc...","rel":"","context":"In "Tips y Tutoriales"","block_context":{"text":"Tips y Tutoriales","link":"https:\/\/cocoalopez.com\/blog\/?cat=31"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2017\/02\/Honeyview_2017-02-26_20-10-11.png?fit=1200%2C591&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2017\/02\/Honeyview_2017-02-26_20-10-11.png?fit=1200%2C591&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2017\/02\/Honeyview_2017-02-26_20-10-11.png?fit=1200%2C591&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2017\/02\/Honeyview_2017-02-26_20-10-11.png?fit=1200%2C591&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2017\/02\/Honeyview_2017-02-26_20-10-11.png?fit=1200%2C591&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":4600,"url":"https:\/\/cocoalopez.com\/blog\/?p=4600","url_meta":{"origin":4695,"position":4},"title":"Helldivers PS4 Save Editing Guide: Key Variables & Apollo Process","author":"cgmodeler","date":"November 1, 2025","format":false,"excerpt":"So I've spend about 5 hours but finally nailed it. Got how to edit the save file and make it work for Helldivers PS4 version. Feel free to buy me a coffe https:\/\/ko-fi.com\/cocoalopez This short guide covers editing common stats in Helldivers 1 PS4 save files using a hex editor\u2026","rel":"","context":"In "Featured"","block_context":{"text":"Featured","link":"https:\/\/cocoalopez.com\/blog\/?cat=1002"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2025\/11\/Helldivers_art.jpg?fit=315%2C315&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":4616,"url":"https:\/\/cocoalopez.com\/blog\/?p=4616","url_meta":{"origin":4695,"position":5},"title":"How I Recovered My \u201cSoft-Bricked\u201d LilyGo T-Watch-S3 After the Factory Sketch Killed USB Uploads","author":"cgmodeler","date":"November 29, 2025","format":false,"excerpt":"If you own a LilyGo T-Watch-S3 (2022 version) and you ever run the official \u201cFactory Test\u201d example from the LilyGo libraries\u2026 congratulations, you just discovered one of the most common (and frustrating) ESP32-S3 traps in 2025. The Hardware & Software I Was Using LilyGo T-Watch-S3 (2022) \u2013 ESP32-S3 with 16\u2026","rel":"","context":"In "Featured"","block_context":{"text":"Featured","link":"https:\/\/cocoalopez.com\/blog\/?cat=1002"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2025\/11\/Grok-Success-ESP-T-watch.jpg?fit=1200%2C659&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2025\/11\/Grok-Success-ESP-T-watch.jpg?fit=1200%2C659&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2025\/11\/Grok-Success-ESP-T-watch.jpg?fit=1200%2C659&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2025\/11\/Grok-Success-ESP-T-watch.jpg?fit=1200%2C659&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2025\/11\/Grok-Success-ESP-T-watch.jpg?fit=1200%2C659&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/cocoalopez.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cocoalopez.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cocoalopez.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cocoalopez.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cocoalopez.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4695"}],"version-history":[{"count":1,"href":"https:\/\/cocoalopez.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4695\/revisions"}],"predecessor-version":[{"id":4696,"href":"https:\/\/cocoalopez.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4695\/revisions\/4696"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cocoalopez.com\/blog\/index.php?rest_route=\/wp\/v2\/media\/4698"}],"wp:attachment":[{"href":"https:\/\/cocoalopez.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cocoalopez.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4695"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cocoalopez.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}