Devlog #3: localStorage sync + export functoin

I realised one of the features missing is the export function where the user can export their tree as many things, so i started coding that. At first, I tried to make the app export to a standard text file or a CSV for Excel. But as soon as I tested it, I realized that a tree/mindmap just doesn’t fit into a flat spreadsheet or as plain text. It was completely illegible. So, I scrapped that and built three new export options:

Markdown (Clipboard): I wrote a custom function that takes the tree and converts it into an indented Markdown list. You can click ‘Copy’ and paste it anywhere and it formats it instantly.

JSON Data: you can also export the entire tree as a nested JSON file and literally drop it straight into your codebase.

PNG Image: to also make exporting it in a visually pleasing way, i coded this option. I integrated html2canvas so you can download a high-res image. To make the UI more like professional, i wrote a script that temporarily hides the UI buttons, resets the zoom/pan, takes the picture, and puts you right back where you were after the export.

The second thing i built is the localStorage. I didnt want users refreshing the website and losing all the stuff that they inputted so this is very essential. Fortunately, since i attached the fork button eventListener to the document itself and not only the individual buttons, i could just add a simple localStorage.setItem for each of the events and save it in localStorage. This was quite simple and wasnt too hard to do.