Your modular, always-on-top desktop utility sidebar.
A multi-threaded creative assistant that lives on the edge of your screen.
🍎 macOS support is currently under active development. Some features may be limited or unavailable on macOS.
KoBar is a frameless, transparent, always-on-top desktop sidebar built with Electron and React. It docks to either edge of your screen and provides instant access to a rich set of productivity tools, all without leaving your current workflow.
Think of it as a Swiss Army knife that floats on your desktop: clipboard manager, notes, AI assistant, screenshot studio, media controller, and more, all in one sleek, customizable sidebar.
- Always-on-top transparent overlay — never leaves your sight
- Edge docking — snaps to left or right screen edge with drag-and-drop repositioning
- Mini Mode — collapses into a small floating eye icon to save space
- Free-floating mode — drag the sidebar anywhere on screen, across multiple monitors
- Multi-monitor support — seamless edge detection and snapping across all connected displays
- Multi-slot FIFO queue — 4 to 20 configurable clipboard slots
- Copy Mode — automatically captures consecutive copies into sequential slots
- Paste Mode — pastes slots in order with a global hotkey (
Ctrl+V) - Image support — clipboard slots handle both text and images
- Double-click to reset — quickly clear and restart the queue
- Tiptap-powered editor — rich text with bold, italic, underline, lists, and images
- Multi-tab system — organize notes into separate tabs with custom icons and colors
- Voice-to-Text — built-in speech recognition for hands-free note-taking
- Password lock — protect sensitive notes with a password
- Color categories — tag notes with color labels (Red, Blue, Green, Yellow, Purple, Orange)
- Compact & Normal view — switch between dense and comfortable layouts
- Multi-provider support — connect to OpenAI (GPT-4o), Google Gemini, Anthropic Claude, and local LLMs (Ollama, LM Studio)
- Streaming responses — real-time token-by-token rendering
- File context — drag & drop TXT, PDF, and images directly into chat
- Custom system prompts — configure AI personality and behavior
- Multi-chat management — maintain separate conversation threads
- Region & Full-screen capture — select any area or capture the entire screen
- Annotation Editor — draw, highlight, add text, arrows, rectangles, and circles with Konva.js
- Multi-display support — captures across all connected monitors
- Save or copy — export to file or send directly to clipboard
- Image border — optional border around captured screenshots
- System media integration — controls Spotify, YouTube, and any media player via Windows SMTC
- Album art display — shows current track artwork
- Play/Pause/Next/Previous — full transport controls from the sidebar
- Google Calendar integration — view and create events directly from the sidebar
- Event alerts — receive desktop notifications for upcoming events
- Monthly calendar view — navigate months and manage events visually
- Customizable timer — set minutes and seconds for focus sessions
- Ambient melodies — play background audio during focus sessions
- Loop mode — repeat focus sessions automatically
- Desktop notifications — get notified when your session ends
| Tool | Description |
|---|---|
| 🔢 Calculator | Floating scientific calculator with history |
| 🎨 Color Picker | Pick colors with HEX/RGB/HSL values, auto-send to clipboard slots |
| ✅ To-Do List | Minimal, draggable task list with priority ordering |
| 📌 Pin Injector | Pin any third-party window to "Always on Top" |
| 📦 KoBox | Drag-and-drop file staging area with auto-cleanup (24h or on quit) |
| 📋 Snippet Vault | Save and organize text templates, code snippets, and AI prompts |
| 🚀 App Launcher | Drag-and-drop shortcuts to pin your favorite apps |
KoBar ships with 11 built-in themes, a custom theme generator, and a built-in Color Picker that lets you choose any color to create your own personalized theme on the fly:
| Theme | Color |
|---|---|
| Ember (default) | 🟠 Warm Amber |
| Ocean | 🔵 Deep Blue |
| Sakura | 🌸 Cherry Blossom |
| Emerald | 🟢 Forest Green |
| Midnight | 🔮 Deep Indigo |
| Amethyst | 💜 Rich Purple |
| Crimson | 🔴 Vibrant Red |
| Nord | 🧊 Arctic Blue-Grey |
| Coffee | ☕ Warm Brown |
| Lavender | 💟 Pastel Purple |
| Custom | 🎨 Pick any color with the built-in Color Picker |
Design Modes:
- Style 1 (Solid) - opaque dark background
- Style 2 (Glass) - frosted glassmorphism with adjustable opacity
Fully translated into 10 languages:
🇺🇸 English · 🇹🇷 Turkish · 🇩🇪 German · 🇫🇷 French · 🇪🇸 Spanish · 🇷🇺 Russian · 🇯🇵 Japanese · 🇨🇳 Chinese · 🇸🇦 Arabic · 🇮🇳 Hindi
KoBar/
├── electron/ # Electron Main Process
│ ├── main.cts # Window management, IPC handlers, OS integrations
│ ├── preload.cts # Context bridge (IPC API exposed to renderer)
│ ├── smtc-worker.cts # Windows SMTC media monitoring (Worker Thread)
│ └── licenseManager.cts # Hardware ID & license validation
├── src/ # React Frontend (Renderer Process)
│ ├── App.tsx # Root component & layout orchestration
│ ├── components/
│ │ ├── layout/ # Sidebar, Calculator, ColorPicker, Focus, KoPlayer, SnippetVault, TodoList
│ │ ├── clipboard/ # Multi-slot clipboard FIFO manager
│ │ ├── notes/ # NotePanel, NoteEditor, SettingsPanel, ResizerHandle
│ │ ├── screenshot/ # ScreenshotOverlay, AnnotationEditor (Konva.js)
│ │ ├── chat/ # AiHubPopup (multi-provider LLM client)
│ │ ├── calendar/ # KoCalendarPopup
│ │ └── license/ # LicenseActivationModal
│ ├── store/ # Zustand state management
│ │ ├── useAppStore.ts # Main application state (~58KB)
│ │ ├── useClipboardStore.ts # Clipboard FIFO queue logic
│ │ ├── useChatStore.ts # AI Hub chat state
│ │ └── useScreenshotStore.ts # Screenshot workflow state
│ ├── hooks/ # Custom React hooks
│ │ ├── useSpeechToText.ts # Web Speech API integration
│ │ └── useUnifiedResize.ts # Cross-platform panel resizing
│ ├── i18n/ # Translations (10 languages)
│ ├── types/ # TypeScript definitions (global.d.ts)
│ └── config/ # Default state & clipboard configs
├── Assets/ # Static resources
│ ├── Melody/ # Focus mode ambient audio files
│ ├── DefaultNote/ # Default note templates
│ └── microsoftStore/ # Store listing assets (10 languages)
└── build/ # App icons & build resources
- Ghost Window Pattern — KoBar uses a large transparent window (6000×4000px on Windows) to enable free-floating positioning while maintaining always-on-top behavior. Mouse events are dynamically forwarded or ignored based on hover detection.
- Strict Context Isolation —
nodeIntegration: false,contextIsolation: true. All IPC is bridged through a typedwindow.apiinterface via the preload script. - Cross-Platform —
process.platformchecks (darwin/win32) are used throughout for OS-specific behavior (NSPanel vs toolbar window type, PowerShell vs AppleScript, SMTC vs generic media). - Zustand State — All global state is managed by Zustand stores. No Redux.
useStateis reserved for purely local UI toggles.
| Layer | Technology |
|---|---|
| Runtime | Electron 40 |
| Frontend | React 19 + TypeScript 5.9 |
| Bundler | Vite 7 |
| Styling | Tailwind CSS 4 |
| State | Zustand 5 |
| Rich Text | Tiptap 3 (ProseMirror) |
| Canvas | Konva.js + react-konva |
| AI Markdown | react-markdown + remark-gfm |
| Persistence | electron-store |
| Distribution | electron-builder (AppX, EXE) |
- Node.js ≥ 18
- npm ≥ 9
- Windows 10/11
# Clone the repository
git clone https://github.com/eedali/KoBar.git
cd KoBar
# Install dependencies
npm install# Start in development mode (Vite + Electron concurrently)
npm run devThis will:
- Start the Vite dev server on
http://localhost:5173 - Watch and compile Electron TypeScript files
- Launch the Electron app once all services are ready
# Compile TypeScript & bundle for production
npm run build
# Package distributable (AppX for Microsoft Store, EXE for Standalone)
npm run kobar-buildKoBar follows strict Electron security practices:
- ✅
nodeIntegration: false - ✅
contextIsolation: true - ✅ No
@electron/remote - ✅ Typed IPC bridge — only specific functions exposed to renderer
- ✅ All frontend–backend communication validated through
ipcMain.handle - ✅ No direct Node.js imports in React components
| Platform | Format | Link / Store |
|---|---|---|
| Windows | AppX | Microsoft Store |
| Windows (Standalone) | EXE | GitHub Release (v1.0.21) |
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License — see the LICENSE.md file for details.
KoBar is made by Ekrem EDALI.
Special thanks to: Tolunay PARLAK & MJ.
If you find KoBar useful and want to support its development, consider buying me a coffee!
