I’m excited to announce Bookmarks Bar – a minimal, privacy-focused bookmark manager that lives right in your browser. It’s open source, stores your data in your own GitHub Gist, and works on any webpage you visit.

The Problem

Let’s be honest: browser bookmarks are a mess. They sync across devices (sometimes), they’re buried in nested menus, and organizing them feels like a chore. Most bookmark managers want you to create yet another account, trust them with your data, and pay a subscription fee.

I wanted something different:

  • Quick access from any webpage
  • Privacy-focused – my bookmarks, my data
  • Portable – works on any browser, any device
  • Simple – no complex features I’ll never use

The Solution

Bookmarks Bar is a bookmarklet – a piece of JavaScript you add to your browser’s bookmarks bar. Click it on any webpage, and boom: your bookmarks appear in a sleek 40px bar at the top of the page.

Key Features

📂 Organize with Folders

Create nested folders, organize bookmarks however you like. Navigate through folders with breadcrumbs. Search across everything instantly.

🔒 Privacy-First

Your bookmarks live in your GitHub Gist – not on some company’s servers. You own the data. You control access. It’s just a YAML file.

⚡ Works Everywhere

Because it’s a bookmarklet, it works on any browser, any device. No extensions to install. No permissions to grant. Just drag and drop.

🎨 Looks Good

Clean interface with light/dark theme support. Fits in a single 40px line. Drag-to-scroll through bookmarks. Inline editing for quick changes.

📱 Full Manager Page

Need to do bulk editing? Visit the full manager page with a tile grid view, drag-and-drop reordering, and folder management.

The Technical Solve

Here’s where it gets interesting. The challenge was: how do you build a bookmark manager that:

  1. Works on any webpage (even ones with strict Content Security Policies)
  2. Stores data privately without a backend
  3. Syncs across devices
  4. Doesn’t require browser extensions

The Stack

  • Astro (SSR mode) – Server-side rendering for the iframe content
  • SolidJS – Reactive UI with signals (no virtual DOM overhead)
  • Tailwind CSS v4 – Styling with CSS custom properties for theming
  • GitHub Gist API – Storage backend (your data, your account)
  • YAML – Human-readable bookmark format

The Clever Part

The bookmarklet injects an iframe that loads from your Bookmarks Bar server. The iframe is in SSR mode, so it’s just HTML/CSS/JS – no build step needed on the client side.

localStorage in iframes is scoped to the iframe’s origin, not the parent page. This means your GitHub token and Gist ID are stored safely and persist across all pages where you use the bookmarklet.

Optimistic updates make the UI feel instant. When you add or edit a bookmark, the UI updates immediately while saving to Gist happens in the background. If the save fails, we reload to revert.

Message passing between the iframe and parent page lets us grab the current page title/URL for the “Add Page” feature, even on pages with CSP restrictions.

Code Quality

We recently refactored the codebase using custom hooks to keep components clean and maintainable:

  • BookmarkBar went from 651 lines to 282 lines
  • BookmarksFullPage went from 993 lines to 421 lines
  • Logic extracted into focused hooks: data management, navigation, search, CRUD, drag-and-drop

Each hook does one thing well. Components compose hooks. Everything is testable and readable.

Open Source

Bookmarks Bar is MIT licensed and available on GitHub. The code is clean, well-documented, and built with modern web standards.

No vendor lock-in. No proprietary formats. Just a YAML file in your Gist that you can edit with any text editor.

Try It

  1. Create a GitHub Personal Access Token with gist scope
  2. Visit bookmarks.productive.me and set up your token
  3. Drag the bookmarklet to your browser’s bookmarks bar
  4. Click it on any webpage to see your bookmarks

That’s it. No signup. No credit card. No tracking.

Technical Details: Built with Claude Sonnet 4.6 and OpenCode. Following strict code conventions documented in AGENTS.md. Uses SolidJS signals for reactivity, server-side rendering for iframe content, and GitHub Gist for storage.

Give it a try and let me know what you think!