I had hundreds of bookmarks.
Most of them were practically useless because I could never actually find them when I needed them.
I tried:
- browser folders
- Notion
- Raindrop
- tab hoarding
- “read later” apps
But eventually everything became:
- cluttered
- slow
- over-organized
- or dependent on cloud sync.
I wanted something faster.
Something that felt more like a developer tool than a traditional bookmark manager.
So I built Bookmrk.
Canvas-style bookmark organization built for developers and power users.
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:
https://github.com/sarvan-2187/Bookmrk
Live Website:
https://sarvan-2187.github.io/bookmrk-web/
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.
| Shortcut | Action |
|---|---|
Ctrl/Cmd + Shift + Y |
Quick Save |
S |
Toggle Sidebar |
P |
Create New Page |
I |
Open Settings |
X |
Toggle Privacy Blur |
/ |
Open Search |
Ctrl/Cmd + K |
Toolbar Search |
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
Modern 4-column canvas organization system
Quick Save Modal
Fast keyboard-driven bookmark capture
Board Settings
Board management and organization controls
Multiple Built-In Themes
Bookmrk currently ships with 3 themes:
- Discord
- Simple
- NeoBrutalist
Each theme changes the entire visual feel of the application.
Discord Theme
Simple Theme
NeoBrutalist 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:
https://github.com/sarvan-2187/Bookmrk
Final Thoughts
Bookmrk started as:
“I just want a faster way to manage bookmarks.”
But it slowly evolved into:
- a productivity system
- a browser workflow tool
- a design experiment
- and a deeper exploration of local-first UX.
There’s still a lot to improve, but the project has already taught me a lot about:
- state architecture
- interaction design
- drag-and-drop systems
- extension APIs
- and developer-focused product design.
If the project sounds interesting:
- try it out
- open issues
- contribute
- or drop feedback.
And if you like the idea, consider starring the repo ⭐
Links
GitHub:
https://github.com/sarvan-2187/Bookmrk
Live Demo:
https://sarvan-2187.github.io/bookmrk-web/
Top comments (0)