Tungsten plan both editor and preview

Tungsten

This is a lightweight self-hostable notes editor that doesn't use a database, supports markdown format, supports vim input, and in general is a combination of all the features I love about other note editors like Notion and Obsidian.

I take a lot of notes for work, personal projects, gaming, etc., and I have tried a lot of different note editors like Obsidian, Notion, and Google Drive (🥱). All of the note editors I've tried have been almost perfect* but missing one or two key things. Because of this, I was FORCED to make my own.

*Google Drive only has 1 good thing going for it 😶

The things I needed in Tungsten were Markdown support, vim input, the ability to self host it and access it on web, and for the documents to not be stored in a database in case I needed to quickly import or export them. Here's a breakdown of the editors I tried:

Table comparing different note editors
Comparing different note editors raw document

A lot of these features were pretty straight forward to implement. For the Markdown editor I used CodeMirror along with a generous amount of CSS to create a light(ish)weight editor pane that supported basic syntax highlighting for Markdown. Luckily this library(?) has very good plugin support so I was able to implement a vim plugin with a pretty low amount of hassle (other than the custom commands that required parsing the AST).

For the preview, I used remark and rehype along with a ton of plugins to get it working exactly how I wanted. I think the amount of time spent tweaking things was well worth it though because I am very pleased with the result.

Vim key repeat document
Resource dump document
Plushies data document
Lottiefiles document
Shift shift menu

As per yuzh, I also added a bunch of features that were not strictly necessary but were definitely fun to work on. For example, here's a shift-shift menu that I took inspiration from JetBrains IDEs. You can use this menu to search any of your existing documents via name OR path and it uses a fuzzy match so it feels pretty natural to use.

For example, if you're looking for /Projects/Tungsten/The Plan.md, you can search for /P/T/TP and likely it would show up unless you had a bunch of other stuff that followed similar names but yeah you get the gist.

I also realized that it was kinda a hassle to always see both panes so I added some general settings that allow you to toggle the panes (as well as vim input, auto save, etc.) which persist between sessions. Overall the menu is very simple in design cuz I didn't feel like it needed to be anything crazy.

Tungsten plan both editor and preview
Tungsten plan preview only
Tungsten plan editor only
Document settings menu

The last thing I added was support for drawing diagrams using Excalidraw. I didn't realize how much I relied on visual diagrams until I didn't have a good system to use and so I figured I'd just add it onto this as a native feature. I think it turned out pretty well and is very nice to use.

Drawing with Excalidraw
Tungsten Logo

Overall happy with this and it has been my main note taking app for almost a year now. At some point I may try to monetize it but frankly last time I worked on it I was having trouble designing a database that would work with this app that I could deploy in AWS.

The current backend for the self-hostable version is just a small Node.js server that uses the filesystem as it's database (this is specifically what I wanted so I could store the files in GitHub).

Anyways take a look if you want and if you want to try it out feel free to pull the image from GitHub Container Registry, the tag is wuguishifu/tungsten.