A fast, private, visual bookmarking sanctuary, rich article reader, and spatial moodboard for developers, designers, and researchers.
Instead of losing links in messy browser bookmark folders or handing your personal taste over to cloud platforms that monetize your data, Stash gives you a tactile workspace that lives entirely on your own device. Everything is saved locally in your browser's IndexedDB with sub-millisecond read/write speeds, offline media caching, and native Android support.
Most bookmarking tools are either static lists of blue hyperlinks or bloated cloud platforms requiring subscriptions and tracking every click. Stash is built on three core tenets:
- Digital Sovereignty: Your research, inspirations, and notes belong to you. Stash saves everything directly into browser silicon with zero telemetry, zero analytics tracking, and zero cloud lock-in.
- Tactile Physics & Typographic Identity: Software should feel tangible. Stash features fluid spring physics, interactive 3D card stacks, architectural typographic covers, tactile synthesized sound effects, procedural mobile haptics, and color-coded hierarchies.
- Zero-Friction Speed & Authoring: Instant search with a tokenized command palette, sub-millisecond local queries, drag-and-drop organization, rich article composition, live previews, and automatic clipboard detection.
- Powered by Dexie.js and browser IndexedDB with transactional multi-entry indexes.
- Offline Media & Favicon Cache: Transparent cache storage via Service Worker (
public/sw.js) andCacheStoragefor instant offline icon and proxy image retrieval. - Fully operational offline. No internet connection is required to browse, search, organize, or write.
- Paste any URL (Instagram post, Reel, carousel, YouTube video, article, GitHub repo, design shot) and Stash automatically pulls high-res thumbnails, titles, descriptions, and site favicons.
- Dedicated modal players for videos and multi-slide Instagram carousels.
- Live Badges: Dynamic reading time indicators (e.g.
3 min read) and video duration tags on cards.
- Dual Creation Modes: Save web URLs or author rich standalone articles in Markdown, HTML, or raw text directly into your board.
- Live Document Preview: Real-time side-by-side or tabbed preview in the compose modal before saving.
- In-Reader Revision Mode: Edit article headlines, formatting, and markdown body directly inside the reader modal with live word counters and auto-save.
- Dominant Color Palette Extraction: Automatically samples harmonious color swatches from card artwork.
- Distinct blueprint typographic covers for folders and cards (
FolderTypographicCover.tsx&TypographicCover.tsx). - High-contrast, clean editorial layout with no dependency on remote cover scraping for empty collections.
- Masonry & Density Grid: View links in default, compact list, masonry, or expanded card density modes.
- Infinite Freeform Canvas: Drag sticky notes, pan across unconstrained board space, organize thoughts visually, and create spatial moodboards.
- 3D Card Stacks: Cluster related references or project links into tactile 3D physical card decks with interactive flip viewing.
- Global Command Palette (
Cmd + KorCtrl + K) with recent search history and auto-complete tag chips. - Multi-token search supporting
#tagoperators (e.g. typing#design inspirationfilters items tagged#designthat match "inspiration").
- Bulk Action Bar: Multi-select cards to batch move, tag, stack, or delete.
- Export Formats: One-click export of selected cards as a formatted Markdown Digest (
.md), JSON Backup (.json), or direct copy to clipboard. - Complete Workspace Backups: Full database export/import and soft-delete trash with recovery.
- Minimalist Slate (Default): Crisp clean slate with sky blue accents.
- Parchment: Warm editorial cream with terracotta accents.
- Obsidian Dark: Deep matte charcoal with glowing amber borders.
- Sepia Library: Vintage leather tones with warm parchment contrast.
- Dynamic Tab Favicon: Real-time SVG theme sync matches your browser tab icon to your active theme.
- Zero external audio assets—100% synthesized in real time via the Web Audio API.
- Tactile audio feedback paired with procedural Android vibration motor haptics.
| Layer | Technology | Purpose |
|---|---|---|
| Framework | Next.js 16 (App Router) | High-performance React framework with Turbopack & static export |
| UI Library | React 19 | Modern concurrent UI components and state management |
| Language | TypeScript 5 | End-to-end type safety across stores and database schemas |
| Styling | TailwindCSS 3 | Utility-first CSS with CSS variables for dynamic themes |
| Local Database | Dexie.js (IndexedDB) | Client-side transactional storage for offline data |
| Animation | Motion (Motion.dev) | Physics-based spring animations, layout transitions, and drag gestures |
| Native Mobile | Capacitor 8 | Native Android container, haptics, status bar, and native share intents |
| PWA & Offline | Service Worker | Stale-while-revalidate caching for proxy images and offline assets |
| Command Palette | cmdk | Fast keyboard-driven command search |
| Icons | mx-icons | Crisp, lightweight geometric SVG icons |
| State Management | Zustand | Lightweight reactive global stores with localStorage sync |
| Color Extractor | node-vibrant | Client-side image dominant color palette sampling |
Make sure you have Node.js 18+ installed. Bun is recommended for ultra-fast builds.
-
Clone the repository:
git clone https://github.com/zakiuhh/stash.git cd stash -
Install dependencies:
bun install --force # or: npm install --force -
Start local development:
bun run dev # or: npm run dev -
Open in your browser: Navigate to http://localhost:3000.
Stash is fully configured with Capacitor 8 and contains a production-ready Android native project.
- "Share to Stash" Target: Share links directly from Chrome, Instagram, YouTube, or Twitter into Stash.
- Hardware Back Button Handling: Closes active popups, navigates folders, and exits cleanly.
- Dynamic Status Bar Tinting: Automatically synchronizes system status bar colors with your active theme.
- Procedural Haptic Feedback: Tactile vibration feedback on interactions.
- 100% Offline Capability: Runs entirely within the local WebView sandbox.
# Compile Next.js bundle and sync native Android assets
bun run cap:sync
# Open the project in Android Studio
bun run cap:openInside Android Studio, press Run ▶ (Shift + F10) to deploy to a physical device or emulator, or select Build > Build Bundle(s) / APK(s) > Build APK(s) to generate app-debug.apk.
| Shortcut | Action |
|---|---|
Cmd + K / Ctrl + K |
Open Command Palette / Global Search |
Cmd + N / Ctrl + N |
Open Add Link / Write Article Modal |
Cmd + F / Ctrl + F |
Create New Folder |
Cmd + B / Ctrl + B |
Toggle Sidebar |
Cmd + S / Ctrl + S |
Open Statistics Dashboard |
Cmd + / / Ctrl + / |
Open Keyboard Shortcuts Modal |
Esc |
Close any active modal, popover, or dropdown |
Space + Drag |
Pan across the Freeform Canvas |
1 – 4 |
Quick-switch between the 4 themes |
stash/
├── app/
│ ├── about/ # Dedicated About page with live benchmarks & specs
│ ├── api/ # Lightweight scrapers and image proxies
│ ├── folder/ # Universal folder route with query param routing
│ ├── layout.tsx # Root layout, mobile viewport, service worker & bridges
│ ├── page.tsx # Main dashboard, folder cards & quick stash
│ └── globals.css # Core design tokens, theme variables & safe-area insets
├── components/
│ ├── AddLinkModal.tsx # Link scraping & article composer with live preview
│ ├── ArticleReaderModal.tsx # Reader view with in-reader editing & palette extraction
│ ├── BrandIcon.tsx # Favicon & brand monogram renderer with offline cache
│ ├── BreadcrumbBar.tsx # Interactive ancestor breadcrumb navigation
│ ├── BulkActionBar.tsx # Multi-select batch move, tag, stack, and multi-format export
│ ├── CanvasBoard.tsx # Droppable surface for spatial sticky notes
│ ├── CommandSearch.tsx # cmdk-powered global search palette with #tag filtering
│ ├── ContextMenu.tsx # Right-click contextual actions
│ ├── EditCardModal.tsx # Card editor with custom image upload & compression
│ ├── FolderCard.tsx # Folder cards with architectural typographic identity
│ ├── FolderTypographicCover.tsx# Architectural blueprint cover for collections
│ ├── ItemCard.tsx # Interactive bookmark card with media badges & selection
│ ├── NativeAndroidBridge.tsx # Hardware back button and share intent listener
│ ├── NoteDetailModal.tsx # Rich markdown and checklist sticky note editor
│ ├── ServiceWorkerRegister.tsx # Client service worker registration for offline assets
│ ├── Sidebar.tsx # Streamlined navigation sidebar
│ ├── StickyNote.tsx # Resizable, draggable spatial sticky note
│ ├── TypographicCover.tsx # High-contrast typographic identity cover
│ └── ThemeToggle.tsx # Theme switcher & sound effects toggle
├── lib/
│ ├── db.ts # Dexie.js IndexedDB schema (v1-v5 migrations)
│ ├── dynamicMeta.ts # Real-time SVG theme-synced browser favicon generator
│ ├── haptics.ts # Safe procedural haptics engine for mobile feedback
│ ├── markdown.tsx # Markdown & HTML parser for sticky notes and articles
│ ├── offline-cache.ts # CacheStorage helper for offline favicons and images
│ ├── sound.ts # Web Audio API sound synthesizer with haptic pairing
│ ├── store.ts # Zustand global state stores (UI, Folders, Items, Notes)
│ └── types.ts # Core TypeScript data contracts and theme types
├── public/
│ └── sw.js # Offline Service Worker for asset & proxy caching
├── android/ # Native Android Capacitor project & Gradle builds
├── capacitor.config.ts # Capacitor configuration for Android
└── next.config.mjs # Next.js configuration with Turbopack & single-threaded build
- No Third-Party Analytics: Stash does not include tracking pixels, analytics scripts, or telemetry beacons.
- 100% Local Storage: All links, articles, notes, and collections are stored directly inside IndexedDB.
- Zero Cookies: No session tracking or third-party cookies.
- Data Portability: Full JSON and Markdown export at any time.
Comprehensive guides available in the /docs folder:
- DESIGN_SYSTEM.md - Complete design system: colors, typography, icons, components, animations
- QUICK_REFERENCE.md - Fast lookup guide for common patterns and components
- DEPENDENCIES.md - Package registry and purpose breakdown
- COMPLETE_WORKFLOWS.md - Step-by-step workflows for every feature
- ANDROID_IMPLEMENTATION.md - Kotlin code and WebView setup for Android
- ARCHITECTURE.md - Technical architecture and data flow
- API_AND_SCRAPING.md - API routes and web scraping details
- USER_GUIDE.md - Complete user manual and feature guide
- CONTRIBUTING.md - Contribution guidelines
Distributed under the MIT License. See LICENSE for more information.