A beautiful, editorial-style frontend for Karakeep bookmark manager. Built for personal use with a clean aesthetic.
- Editorial Design — Clean typography, generous whitespace, and large screenshot previews
- Collection Management — Organize bookmarks into hierarchical collections with custom icons
- Smart Lists — Dynamic lists based on search queries (Inbox, Tagless, custom filters)
- Tag Browser — Visual tag cloud with filtering
- Dark Mode — Full dark theme support
- Responsive — Works on desktop and mobile
- AI Summaries — Displays Karakeep's AI-generated summaries prominently
- Framework: Next.js 14+ (App Router)
- Styling: Tailwind CSS
- Components: shadcn/ui primitives
- Icons: Lucide React
- Node.js 18+
- A running Karakeep instance
git clone https://github.com/spaceshipmike/karakeep-frontend.git
cd karakeep-frontend
npm installCreate a .env.local file:
KARAKEEP_API_URL=http://localhost:3000
KARAKEEP_API_KEY=your-api-key-herenpm run devOpen http://localhost:3000 in your browser.
npm run build
npm run startsrc/
├── app/ # Next.js App Router pages
│ ├── bookmark/[id]/ # Bookmark detail page
│ ├── list/[slug]/ # Collection view
│ ├── tag/[name]/ # Tag filter view
│ ├── tags/ # Tag browser
│ └── search/ # Search results
├── components/
│ ├── bookmark/ # Bookmark cards and grids
│ ├── layout/ # Sidebar, Header, Footer
│ ├── list/ # Collection management
│ └── ui/ # Shared UI components
├── lib/ # API client, utilities
└── types/ # TypeScript definitions
KarakeepFE connects to Karakeep's REST API. Key endpoints:
GET /api/v1/lists— Fetch all collectionsPOST /api/v1/bookmarks/search— Search/paginate bookmarksGET /api/v1/bookmarks/:id— Get single bookmarkGET /api/assets/:id— Serve screenshot images
See Karakeep API docs for details.
MIT