Rakugaki

I have a notes problem. Not a "too many notes" problem - a "none of these apps are actually for writing" problem.

In the last 2 years, I've used Notion, Obsidian, Todoist, CotEditor, Bear and VSCode.

Each of them have their own strengths but also annoying flaws. I listed the features I like and use in each of the apps -

Light-weight
Syntax highlighting
Code blocks (+ Markdown)
Multi-tab
Restore notes on restart
Command Palette
No sign ups.

So I built my own Frankenstein note-taking app.

The name is just the Japanese word (落書き) for "doodle" or "scribble." Which is what my notes are. And probably your's too.

The actual problem

Every notes app wants to be your second brain, your knowledge base, your digital garden and an insane mindmap. Hard luck because my notes are usually random and not organized at all. More of a dumpyard than a garden.

I just want to write markdown files. Files that I own. Files that live on my filesystem, open in any editor, back up to wherever I want. Not synced to a server I don't control. Not locked behind an account I'll eventually have to close.

The closest thing to what I wanted was just... opening a .md file in a text editor and start typing. Which works, but it's bland, and not a writing environment for my requirements. I needed a Tikka Masala while what I had was just toasted bread.

Rakugaki is for this.

Building it

A PWA built on Next.js, with CodeMirror handling the editor and remark parsing the markdown. No backend. No database. The service worker handles offline mode. Your notes are files on disk - the app just reads and writes them through the File System Access API.

The interesting parts were mostly resolving issues, as always.

CodeMirror is incredibly powerful and incredibly easy to over-configure. I spent more time removing things than adding them. The default setup wants to do a lot. I wanted it to do less, but do that well — markdown-aware editing, syntax highlighting in code blocks, find and replace, that's about it.

Mermaid diagrams took way longer than expected. The library renders beautifully but it hardcodes white-space: nowrap on every label, then sizes the node boxes for single-line text. So anything longer than a few words just... cuts off. The fix ended up being a DOM post-processing step after every render — override the inline styles, measure the real wrapped height with scrollHeight, expand the rect and foreignObject, recalculate the viewBox. It works. It's also the kind of code you don't look at too closely.

Syntax highlighting in the preview had its own thing going on. I was importing a highlight.js stylesheet statically and also defining the same styles in globals.css, and the bundle order was doing something unpredictable in dark mode. Removed the static import, wrote both light and dark themes directly in CSS with proper scoping, problem gone.

Anyway, the feature salad is now finally complete.

What it actually does

It's just a markdown editor. Tabs, a sidebar for opening and saving files, a preview pane with rendered markdown and Mermaid diagrams, find and replace, a word count bar at the bottom. That is literally everything important.

Zen mode (Cmd+Shift+Z) hides everything except the editor. I use this more than I expected to.

Session restore brings back unsaved notes if you close the app mid-thought. The recovery copy deletes itself once you properly save the file.

The command palette is Cmd+K, or right-click anywhere in the app. Had to remove that annoying default browser context menu on right click.

Installing it

Go to rakugaki.vercel.app in Chrome or Edge and click the install icon in the address bar. On Safari (Sonoma+), File > Add to Dock.

The web version just shows installation instructions. The actual app is the installed one. Slightly annoying, completely intentional.

The code

It's on GitHub. File an issue if you think something's broken.