I was inspired recently and decided to write another app. I’m going to write a note-taking app that lets you nest notes in a hierarchical fashion and use markdown for text formatting.
I wanted to understand what challenges it might impose, so I decided to prototype some UI today.
Here’s what I’ve got so far.
After about four hours of coding, the following work:
- Basic data type to represent a node and its children.
- Functioning UI to view the nodes. You can select a node and view its children. As you dig deeper into a hierarchy, more and more tables are added and you can scroll left and right to view each level.
- Editing and adding of nodes works. You can double-click a node and a modal window pops up to let you edit the text. When done, the changes are saved and the UI is updated. You can add a new node with a shortcut key.
- Markdown formatting. I used SwiftyMarkdown to convert my markdown text into an NSAttributedString that I could display in the table view. Unfortunately, SwiftyMarkdown doesn’t build for macOS, only iOS. I hacked it quickly so that it doesn’t rely on UIFont. The hack is temporary, and I’ll likely re-do this work later and send a pull request to the author.
The big thing that doesn’t work yet is saving and loading a document. I want a working end-to-end scenario soon, so even though I’m still thinking about what I need in the document format, I’ll move forward with a simple JSON dictionary for the time being. (This file format won’t cut it if I want to sync across multiple devices. I’ll probably do something similar to what I did with Lil Todo.)
The app will be made up of nested tables, as you’d see in a UI like macOS’s Finder. Each table will contain a list of notes. Each note will use markdown for formatting. For simplicity, notes don’t have titles. They just have text. When you click on a note, you’ll see a list of additional notes to its right. These are sub-notes. This will allow you to easily create hierarchical notes, like an outline. You’ll be able to add as many sub-notes as you’d like to any note. You can also drag and drop notes around to change the hierarchy or grouping of things.
I will admit the UI is somewhat inspired by gingko, however I don’t plan on showing all the notes at a given level as they do there. (I find that a little confusing.) I’ve always been fascinated by using nesting to organize thoughts. A couple of other apps that I’ve enjoyed using that are somewhat related are MindNode and Tree. Both are simple and beautiful apps.
Some other features that I plan for this app:
- Images as notes. You’ll be able to drag an image as a note anywhere. To keep the UI simple, I’m not planning on “embedding” images within the text. They’ll simply be treated as other notes.
- Cloud file sync. I’ll support Dropbox again and possible other cloud file sync engines. I don’t plan on writing a custom service for this, but the app will support single-user editing a document across multiple devices.
- Views. It should be possible to collect all notes that have to-do items in them and present them all the to-dos in a massive list. It should also be possible to collect all notes that have a hashtag in them and also present them in a massive list. These will be treated as “views” that allow you to look at your data in a different way.
My plan for this app is to write it as quickly as possible, get an MVP working, and ship it to the Mac App Store. It’s March 5, 2017, so let’s see how quickly I can do that. My second goal is also to write up development notes on this blog to share some of the techniques I use to write software.
If you got this far, thanks for reading! Be sure to also follow me on twitter for updates.