Devlog #1: Building Fork()

Fork() is a branching notepad for the Frictionless mission. I decided to tackle a massive personal pain point: linear note-taking. Whenever I’m mapping out complex logic or trying to write a function, I always hit a point where I want to try two different approaches. Usually, that means either deleting my past context, or scrolling endlessly up and down a huge document. It completely breaks my flow. So, I started building Fork().

Here’s what I managed to get working for the core engine so far:

Branching: I set up the JavaScript so that the moment you click Fork(), a new parallel text box pops up and automatically grabs your cursor. You don’t even have to click into it to start typing.

Branchign tree lines: This is the part I’m most proud of. I originally thought I’d have to write a bunch of heavy JavaScript math or use a HTML Canvas to draw the connecting lines between the thoughts. Instead, I figured out how to draw the entire tree using pure CSS. As you spawn new branches, the browser instantly redraws the geometry.

Zooming: Since the canvas grows infinitely left, right, and down, I added a custom zoom controller (and also included Ctrl + Scroll). When your logic tree gets massive, you can zoom out to get a bird’s-eye view of your whole thought process. The text boxes also automatically resize and push the rest of the tree down as you type, so nothing gets cut off.