Read, Archive, And Highlight — The SaveSync Reader Panel

Opening a bookmark in SaveSync doesn't send you away from your Vault. The Reader panel slides in as a side view and gives you three tabs on the same content: the cleaned-up Article view, the Web Archive snapshot, and the Highlights you've made on the page. One keyboard shortcut away, all on one screen.

This post walks through the three tab states — Article, Web Archive, Highlights — and shows how highlighting works end-to-end. Every pane below is the actual Reader UI animated, not a mockup.

1. Click a bookmark, Reader opens on Article

The Reader header shows a close button, the READER label with your PRO badge, the original URL, and Copy Link / New Tab affordances. Below that sit three tabs. The Article tab is the default — it shows a Readability-cleaned version of the page: no ads, no navigation, no cookie banners. Just the image, the title, the byline, and the body text.

The highlights sidebar on the right is always visible. When no highlights exist yet, it shows its empty-state prompt: "Select text in the article to highlight. A color toolbar will appear above your selection."

2. Web Archive tab — snapshot on demand

Switch to the Web Archive tab and you're reading the full HTML snapshot SaveSync stored when you archived the page. Same content, but served from your Vault instead of the live URL. When the original URL dies six months from now, this tab is what survives.

Archives are on-demand, not automatic — hit "Archive this page" from the Vault card's more menu or from the Reader's Web Archive tab itself if the snapshot hasn't been taken yet. SaveSync fetches the live HTML, runs Mozilla Readability to extract the article body, strips tracking scripts, compresses with gzip, and stores the result in the web_archives table. A typical article snapshot weighs 40–200 KB.

3. Highlights — select, pick a color, save a note

Here's the full highlight flow in one choreographed pane. You drag-select a phrase inside the article. A color toolbar appears above your selection with four swatches: yellow, blue, red, green. Click a color and the passage is highlighted instantly. The highlight appears in the right sidebar with a color-coded bar. Type a note in the Annotation field at the bottom, click Save Note, and the note is persisted alongside that highlight — searchable by SaveSync's semantic search from then on.

The four highlight colors and how people use them

SaveSync gives you four colors deliberately — enough for meaningful distinction, few enough that you won't agonize over choice. Patterns people settle into after a few weeks:

• Yellow — the primary highlight for "this is the key claim of this paragraph"
• Blue — definitions, data points, or anything you want to cite later
• Red — disagreement or follow-up required
• Green — quotes worth sharing or a turn of phrase worth stealing

Colors are searchable — color:yellow in the Vault search bar surfaces every yellow-highlighted passage across all your bookmarks. Combined with folder scoping, this is how researchers rebuild their evidence trail in minutes instead of hours.

What lives in an archive vs a highlight

The two features share storage but play different roles. The web archive is the entire page frozen in time — you can re-read the full thing years later, exactly as it was. A highlight is a surgical annotation pointing at a specific passage inside that page, plus optional free-text notes.

Archives survive link rot. Highlights survive your own memory. You need both if the bookmark actually matters.

An archive row in Postgres holds the cleaned HTML body, original raw HTML as a fallback, inline images (base64 under 2 MB or CDN-hosted above), the archive timestamp, and a content hash. A highlight row holds the passage text, its start/end offsets in the archived body, the color, an optional annotation, and foreign keys linking it to the save and the user.

Highlights are searchable through SaveSync's AI

SaveSync's semantic search indexes the full text of every archive — including the surrounding paragraphs of each highlight — so you can find a bookmark by any phrase that appeared in its body, not just its title. For Pro users, highlights are treated as weighted signals: queries that match a highlighted phrase rank that bookmark higher than queries that only match ambient body text.

Practical consequence: the more you highlight, the sharper your search becomes. Highlights aren't just visual cues — they're signal you're giving the search system about what matters.

Reading on mobile

The mobile app shows highlights you've made on desktop, read-only for now — the mobile Reader UI is article-only, no archive or highlight creation from your phone. You can tap a highlight to see its annotation, and the color coding carries over. Creating new highlights and archives is a desktop-only workflow because precision text selection on touchscreens isn't reliable enough to make the feature feel good.

More on the cross-device split in SaveSync on mobile.

Export your highlights and archives

Settings → Export dumps every archive as a zip of static HTML files, and every highlight as a JSON or Markdown file with the full passage text, color, and annotation. Lifetime and Pro accounts get this. Free accounts don't have archives or highlights to export, but they can still export their bookmark list.

The escape hatch matters: if you ever leave SaveSync, your research comes with you as portable files you can open in any browser or text editor.