{"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":2836,"url":"https:\/\/cocoalopez.com\/blog\/?p=2836","url_meta":{"origin":4695,"position":0},"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":4676,"url":"https:\/\/cocoalopez.com\/blog\/?p=4676","url_meta":{"origin":4695,"position":1},"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":3760,"url":"https:\/\/cocoalopez.com\/blog\/?p=3760","url_meta":{"origin":4695,"position":2},"title":"IMPROVE MAYA STARTUP AND SHUTDOWN TIMES","author":"cgmodeler","date":"October 13, 2022","format":false,"excerpt":"Since Maya 2016, it launches with a set of at least 3 acwebbrowser.exe process. Besides all the fuss it creates in the task manager and resource hog it can be, it can also slow down Maya startup and shutdown times by more than 200%, up to 30 seconds each time!\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\/2022\/10\/improve-maya-startup-and-shutdown-times.jpg?fit=640%2C394&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2022\/10\/improve-maya-startup-and-shutdown-times.jpg?fit=640%2C394&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2022\/10\/improve-maya-startup-and-shutdown-times.jpg?fit=640%2C394&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":421,"url":"https:\/\/cocoalopez.com\/blog\/?p=421","url_meta":{"origin":4695,"position":3},"title":"Excelente idea por parte de Coca-Cola","author":"cgmodeler","date":"May 27, 2011","format":false,"excerpt":"Este comercial de Coca-Cola Per\u00fa demuestra la honestidad de las personas dejando en la calle una billetera con 100 soles (aproximadamente 40 dolares) con los datos del due\u00f1o. El 70% de las personas la devolvi\u00f3 a su due\u00f1o. [Fuente: Crixus]","rel":"","context":"In "world short films"","block_context":{"text":"world short films","link":"https:\/\/cocoalopez.com\/blog\/?cat=34"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/img.youtube.com\/vi\/FLYz6DaCuIU\/0.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3782,"url":"https:\/\/cocoalopez.com\/blog\/?p=3782","url_meta":{"origin":4695,"position":4},"title":"Ampache Create Catalog","author":"cgmodeler","date":"October 31, 2022","format":false,"excerpt":"To create your first catalog select Local, Music and the path to the folder must be If your ampache is located at: www.myweb.com\/ampache then your path to folder is: \"home\/name_your_account_host\/public_html\/your_ampache\/your_folder_name_here\"","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\/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":3774,"url":"https:\/\/cocoalopez.com\/blog\/?p=3774","url_meta":{"origin":4695,"position":5},"title":"Folder templates creation for Windows and Mac (PostHaste)","author":"cgmodeler","date":"October 28, 2022","format":false,"excerpt":"Previously I used text2folders a small utility from donationcoder to create templates for folder creation. Just found this free utility that uses templates and wildcards to create the same folder structure and add template files as well (psd, ae, etc...). Download here: https:\/\/www.digitalrebellion.com\/posthaste\/index https:\/\/youtu.be\/4jdj_lE_er8","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\/2022\/10\/image-1.png?fit=1101%2C538&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2022\/10\/image-1.png?fit=1101%2C538&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2022\/10\/image-1.png?fit=1101%2C538&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2022\/10\/image-1.png?fit=1101%2C538&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/cocoalopez.com\/blog\/wp-content\/uploads\/2022\/10\/image-1.png?fit=1101%2C538&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}]}}