Hacker News has no search box, so I built a reader in one HTML file

Hacker News is fast and plain, and it has no search box. HN Reader is a front end I built to add one, along with time windows and quicker comment threads. The whole thing is a single index.html with no build step, no dependencies, no account and no tracking.

Why it uses two APIs

The official Hacker News API is a read-only Firebase mirror. It has no search, no pagination and no filtering. The Algolia HN Search API, which is HN's own search backend, fills exactly those gaps. So the reader uses each one for what it does best:

• Firebase for the live ranked feeds (top, new, best, Ask, Show, Jobs), because it has the current score for each story.
• Algolia for search, for the 24 hour, week, month and all-time windows, and for whole comment threads.

One request instead of seventy-one

With the official API, a comment only lists the ids of its replies, so reading a full thread costs one request per comment. Algolia can return the entire comment tree in one request. A 71 comment thread drops from 71 requests to one, which is the single biggest reason the reader feels fast.

What it adds to Hacker News

• Search for stories, comments, Ask HN, Show HN and jobs, with Cmd+K to focus the box, a live hit count and query time.
• Time windows of 24 hours, a week, a month and all time, which switch the data source underneath without you noticing.
• Threaded comments with per-thread collapse and a lazy "load more replies".
• Saved stories and followed authors. Following an author merges their newest submissions into one feed.
• User profiles with karma, join date, bio and recent submissions.
• List and grid layouts, light and dark themes, and dimming of stories you have already visited.

There is no login, and there cannot be one

Every official endpoint is a GET with no authentication, so a browser app cannot vote, comment or submit. Those actions exist only as cookie-authenticated forms on news.ycombinator.com, which browsers block across origins and which would mean proxying your password through a server. So the reader is read-only by design, and the library is the account. Saved stories and followed authors live in localStorage, in your browser only, with no sync between devices.

Run it yourself

git clone https://github.com/rokib16x/hn-reader.git
cd hn-reader
python3 -m http.server 4180
# open http://localhost:4180

That is the whole setup. It is a static file, so you can also put it on GitHub Pages, Netlify or S3.

A design built from surfaces, not cards

The interface gets its structure from four surface planes instead of boxes and shadows: one for the chrome behind everything, one for the reading surface, one for inset bands such as control strips and quoted text, and one for things that float above the page like menus. The masthead, sidebar and content column are separated by an edge and by a step in surface value, so chrome never blends into what you are reading. Corners are square, there are no drop shadows, and colour is spent sparingly on the wordmark, the active feed, saved bookmarks and high scores. Every colour is a token defined for both themes.

Small decisions

• Comment HTML is sanitized to an allowlist of tags before it is inserted, and non-http links are unwrapped.
• Outbound links open from one delegated click handler, because some embedded browsers ignore target="_blank".
• The list keeps its height while loading, so changing a filter never makes the page jump.
• Every localStorage call is wrapped in try and catch, so it still works in private windows and with site data blocked.

The interface is set in Manrope with IBM Plex Mono for utility text such as ranks, scores and timestamps, in light and dark themes. It is not affiliated with Y Combinator. The code is MIT licensed on GitHub.