A web highlighter I built. Not currently live.
I built and previously published Notilo for web highlights and local notes. It is no longer live. This case study preserves its interface, text-range anchoring and export workflow.
The problem
You read something important, close the tab, and two days later cannot remember where it was or why it mattered. I built Notilo to anchor notes to exact text ranges and restore highlights when a page re-rendered or was revisited. The extension is now a past project.
Before
With Notilo
Re-attaching a highlight that spans several DOM nodes after the page re-renders, or when you come back days later.
How it works
The workflow I built. Notilo is no longer live, so these screens are redrawn from its last version.
Under the hood
Highlights anchored to text ranges with the Selection and Range APIs, so they survive re-renders and come back when you revisit the page. It had notes in six colours and six categories, in-page search, and export to a text file. Everything stayed in local storage, with no account and no sync.
What you picked
Anchored to the exact words
Per page, on your device
Puts highlights back as the page changes
Decisions
Each decision lists the reason for it and what it gave up.
Why
A simple key-value lookup, scoped to the exact page, that works offline.
Trade-off
Query strings and hashes create separate sets of highlights, which can be confusing on single-page apps.
Why
It catches late-loading text as it appears and costs nothing while the page is idle.
Trade-off
It has to be disconnected carefully to avoid memory leaks.
A bug worth telling
What I tried first
::highlight is the right long-term answer and was the first thing I tried, but Safari and older versions of Chrome didn’t support it. Wrapping ranges in the DOM runs everywhere.What I learned
chrome.storage.local has limits. Pages with heavy annotation needed LRU eviction of old highlight sets.Screens
Features
Yellow, pink, green, blue, purple and orange.
Add context, thoughts or to-dos next to the text.
General, Important, To-do, Research, Quote or Idea.
A fast overlay that filters across every note on the page.
One note or all of them, ready to paste anywhere.
I built a local note library with categories, search and text-file export.
Your data
The original extension stored notes locally in the browser, with no account, analytics or ads. This page documents that past implementation; Notilo is no longer live.
No. I built and previously published Notilo, but it is no longer live or available for new installations. This page remains as a portfolio case study.
A Chrome extension for six-colour highlights, categorised notes, in-page search and export, without an account.
The implementation used the Selection and Range APIs to anchor annotations to page text and restore them on revisits.
The original implementation stored notes locally in the browser. The screens here are redrawn from its last version, 3.2.5, and show only what it did.
Milestones
Highlights in six colours, notes, in-page search and export.
Highlights read better in all six colours, search on a page is faster, and exports are cleaner.
It stays on this site as a record of what I built.
I built and previously published Notilo. It now remains as a past project and engineering case study.
Highlights look smoother and read better, whichever of the six colours you pick.
For businesses
Websites, Shopify stores, Chrome extensions and Android apps, designed and engineered with the same care as my own products.
Booking new projects
I read every message myself and reply within a day or two with honest next steps.
Your message is on its way. I’ll reply to within a day or two.
