Side project · October 2024
Marginalia
A bookmarklet that lets you scribble in a webpage's margins and exports the notes as Markdown.
Why it matters
I read long articles and want to annotate them like a paper book, but every "read later" app locks my notes inside its own silo, in its own format, forever.
What I built
A single-file bookmarklet that injects a margin gutter, captures highlights and handwritten-feel notes anchored to text ranges via a robust text-quote anchoring scheme, and exports clean Markdown with quoted context. No account, no server, no extension store.
What I learned
Anchoring annotations to a mutable DOM is genuinely hard — text-quote selectors survive re-renders far better than XPath. And the constraint of "must fit in a bookmarklet" made me ruthless about scope in a way a real app never would have.
Marginalia is barely a kilobyte of JavaScript that you keep in your bookmarks bar. Click it on any long article and a margin appears — a real gutter where you can highlight passages and jot notes, the way you’d dog-ear and scribble in a paperback. When you’re done, it spits out clean Markdown with your notes and the quoted context, and you own that file completely.
The interesting engineering is the anchoring. Web pages re-render, lazy-load, and rearrange themselves constantly, so a note pinned to “the third paragraph” is gone the moment the layout shifts. Marginalia uses text-quote anchors — it remembers a snippet plus a little surrounding context and re-finds it — which turns out to be dramatically more durable than position-based selectors.
It has no backend by design. The whole appeal is that your reading notes are just text, on your machine, in a format that will still open in thirty years.