A keyboard-driven, canvas-style bookmark manager built with React, TypeScript, Zustand, DnD-kit, and Chrome Extension APIs.

Why I Built Bookmrk

Most bookmark managers started feeling either:

• too cluttered


• too cloud-dependent


• too slow for rapid workflows


• or overloaded with features I never actually used

I wanted something that felt:

• fast


• local-first


• keyboard-centric


• visually organized


• open-source


• and developer-friendly

So I built Bookmrk.

A lightweight bookmark manager with:

• instant quick-save shortcuts


• canvas-style organization


• drag-and-drop boards


• multiple visual themes


• Chrome bookmark import


• export/import support


• and a workflow designed for people who live in the browser.

Introducing Bookmrk

Bookmrk is an open-source bookmark manager built using React, TypeScript, Vite, Zustand, DnD-kit and Tailwind CSS.

GitHub Repository:

The project focuses heavily on:

• local-first workflows


• keyboard productivity


• clean information architecture


• and fast interaction patterns.

The Core Idea

Instead of treating bookmarks like an endless vertical list, Bookmrk organizes them into:

• Pages


• Boards


• Bookmark Cards

Think of it like:

Trello + browser bookmarks + keyboard-first workflows.

The interface uses a canvas-style 4-column board system where boards can be freely rearranged.

This makes large bookmark collections significantly easier to navigate visually.

Features

Quick Save Workflow

One of the main ideas behind Bookmrk was reducing friction.

Instead of:

• opening a bookmark manager


• creating folders


• manually saving links

You can simply press:

Ctrl/Cmd + Shift + Y

And the current page instantly gets saved into a Quick Saves board.

Keyboard-Driven Productivity

Bookmrk includes several keyboard shortcuts designed for power users.

The goal was to make navigation feel closer to tools like:

• Raycast


• Arc


• Linear


• VSCode

rather than traditional bookmark apps.

Canvas-Style Organization

One of my favorite parts of the project is the board system.

Boards can:

• move across columns


• reorder dynamically


• act as visual bookmark groups


• support drag-and-drop placement

Unlike traditional nested folders, this layout provides:

• spatial memory


• visual grouping


• faster scanning


• less cognitive overload

Screenshots

Home Layout

Home Layout

Fast keyboard-driven bookmark capture

Board Settings

Simple Theme

Architecture Decisions

I wanted the architecture to remain:

• modular


• lightweight


• maintainable


• extension-friendly

State Management - Zustand

I used Zustand because:

• minimal boilerplate


• simple global state


• easier mental model


• excellent developer experience

The store handles:

• pages


• boards


• bookmarks


• themes


• settings


• modals


• toast notifications

without requiring Redux-level complexity.

Drag & Drop - DnD-kit

The canvas organization system uses:

@dnd-kit/core

@dnd-kit/sortable

This enabled:

• fluid drag interactions


• board insertion logic


• cross-column movement


• reorder animations

One challenge here was:

supporting insertion into empty columns while preserving intuitive positioning behavior.

Storage Strategy - Local First

Bookmrk uses:

• Chrome extension storage APIs when available


• localStorage fallback otherwise

This allows:

• browser-extension support


• standalone web usage


• portability


• offline-first behavior

I intentionally avoided making cloud sync mandatory.

Technical Challenges

Some interesting engineering problems during development:

1. Chrome Import Deduplication

When importing Chrome bookmarks:

• duplicate imports needed prevention


• but users also needed re-import support

Solution:

• persisted import flags


• automatic reset when imported boards are deleted

2. Dragging Across Empty Columns

Traditional DnD systems often assume populated containers.

Supporting:

• empty lanes


• dynamic insertion


• cross-column sorting

required additional placement logic and collision handling.

3. Theme Consistency

Supporting:

• light mode


• dark mode


• NeoBrutalist mode

while keeping:

• modal readability


• accessibility


• contrast consistency

became surprisingly complex.

Privacy & Local-First Philosophy

A major design principle behind Bookmrk is:

Your bookmarks should belong to you.

By default:

• data stays local


• no forced accounts


• no mandatory cloud sync


• no external tracking layer

Export/import support also makes the data portable.

Future Roadmap

Some things I want to explore next:

• browser sync


• Firefox support


• command palette improvements


• AI-assisted bookmark organization


• advanced search indexing


• bookmark tagging


• collaborative boards


• plugin system


• markdown support


• smarter import/export tools

Open Source & Contributions

Bookmrk is fully open-source and contributions are welcome.

If you're interested in:

• frontend engineering


• Chrome extension development


• UX systems


• state management


• accessibility


• productivity tooling

feel free to contribute.

GitHub:

Live Demo:

https://sarvan-2187.github.io/bookmrk-web/

opensource #webdev #react #typescript #productivity #chrome #javascript #github