A zero-click, hover-activated clipboard shelf and native OS file-transfer hub for the desktop.
Lives invisibly on the screen edge. Approach it, and it opens. Drag anything out — into Photoshop, Word, Slack, Explorer, anywhere.

Quick Start · Demos · Features · Codebase & Architecture · Security · Roadmap · Contributing

_{Built with Electron · React · TypeScript · Framer Motion · Zustand
License: Apache-2.0  ·  Status: Public Beta}

Every clipboard manager on the market breaks your flow. You copy something, switch apps, paste, then hunt through Win+V history with arrow keys or dig into a tray menu. Multi-step. Modal. Slow.

Edge-Drop removes the friction. It anchors to the screen edge of your monitor as a transparent, always-on-top, click-through surface. When your cursor approaches the edge, the shelf springs open. Drag images, file stacks, rich text, and HTML bundles out of it — directly into whatever desktop app you're already using. No shortcuts. No window switching. No modal dialogs.

It is built for the developer and creative workflow where you constantly juggle screenshots, code snippets, file paths, design assets, and reference links between many windows at once.

All demos are silent autoplay loops. Hover to scrub, right-click → open in new tab for full size.

• Node.js v18 or higher
• OS: Windows 10/11 (uses Win32 OLE drag pipelines and transparent-window cursor polling)

git clone https://github.com/Deepender25/Edge-Drop.git
cd Edge-Drop
npm install
npm run dev          # launches Electron + Vite HMR

npm run typecheck    # runs tsc --noEmit against both node and web configs

npm run build:github # outputs an NSIS .exe for GitHub releases
npm run build:store  # outputs an MSIX .appx for Microsoft Store submission

Zero-click edge hover

• Frameless, transparent, always-on-top BrowserWindow anchored at x=0 or right screen edge
• 100% click-through when collapsed — desktop stays fully usable
• Configurable hot-zone height (25% / 40% / 60% of screen) and blade height (50% – 80%)
• Independent Edge Trigger Placement: Choose exact trigger strip alignment (Top, Center, or Bottom) relative to the shelf, with dynamic CSS clipPath calculation matching the exact sensor region.
• Edge Location Hint (Proximity Beacon): Subtle 1.5px hairline gradient pulse (300ms duration, 0.28 opacity) that flashes once on the screen edge when cursor touches the edge at a misaligned vertical position, guiding users to the shelf.
• Multi-monitor support: Pick exactly which display the panel sticks to, with options for Left or Right screen edges. Features a single source of truth multi-display engine (getDisplayListOptions()) with real-time physical resolution calculation (3840×2160, 2560×1440, 1920×1080) across all High-DPI Windows display scaling factors.
• Cross-Reboot Display Persistence: Edge-Drop remembers your chosen monitor across device restarts. A 4-tier resolution pipeline (exact session ID → fuzzy workArea geometry match within 8px tolerance → nearest by position → primary fallback) silently re-identifies the correct physical monitor after Windows re-assigns numeric display IDs on reboot. If the monitor is genuinely unplugged, the panel seamlessly falls back to the Primary Display without any user action.
• Fullscreen Protection (Game Mode): Native Windows SHQueryUserNotificationState OS detection (fullscreen.ts) automatically suppresses edge hover when Direct3D games, fullscreen videos, or presentations are active.
• Ultra-lightweight: Optimized memory footprint (~60% reduced RAM) using custom edgelocal:// streaming protocols and compressed WebM assets.

Synthesized Web Audio Haptic Suite

• Zero-Asset Audio Engine (soundEffects.ts): Real-time synthesized Web Audio API sound suite providing tactile audio feedback for UI micro-interactions without audio file assets.
• Mechanical Dial Ticks: High-frequency 1800Hz → 900Hz micro-ticks (playDialTickSound) when sliding position controls.
• Mechanical Delete Haptic: Dual-stage downward pitch sweep (1400Hz → 250Hz in 14ms + 150Hz → 40Hz thud) when deleting items (playDeleteSound).
• Tactile Switches & Buttons: Resonant pops for toggle switches (playToggleSound) and crisp clicks for buttons (playButtonClickSound).
• Global Audio Control: Global Sound effects toggle switch in Settings (ON by default) with isSoundEnabled() guard across all synthesis routines. Eager AudioContext auto-unlock on initial interaction (pointerdown/mouseenter/keydown).

Segmented Settings Architecture

• Stationary 3-Category Navigation Bar: Organized into three clean, emoji-free tabs: Behaviour (1st), Position (2nd), and Appearance (3rd).
• Stationary Header & Independent Scroll Area: Fixed top tab bar (.settings-fixed-header) stays 100% stationary while settings controls scroll independently underneath it.
• Independent Scroll Position Memory: Each category section maintains its own separate scrollTop state across tab switches (tabScrollPositions).
• Pure CSS Selection Synchronization: Native CSS active tab styling (.settings-tab-btn.active) eliminating layout projection glitches during panel position adjustments.
• 5% Magnetic Tick Slider: Smooth 0.002 real-time 1-to-1 continuous tracking during drag with 60fps/120fps precision, featuring 21 visual tick dashes, live percentage badge (50%), percentage quick-jump buttons (0%, 50%, 100%), and magnetic 5% snapping on pointer release.
• Position & Display Switch Preview: 1.75s temporary interactive preview window when changing Stick position (Left / Right) or Display monitor in settings.
• Quit Edge-Drop Application Action: Integrated Quit Edge-Drop button under Application settings with IPC integration (window.edge.quitApp()) to cleanly terminate electron main and background processes.

Silent Background Auto-Updates

• Zero-Friction Updates (electron-updater): GitHub releases feature background downloading and a single-click "Restart to Update" button.
• Monochrome Glassmorphic Banner: Prominently positioned at the top of the scrollable content area across all category tabs. Styled with a dark-mode glassmorphic 4% white card fill (rgba(255, 255, 255, 0.04)), 12% white border, and high-contrast white button.
• Microsoft Store Isolation: Isolated build pipelines ensure Microsoft Store (MSIX) builds remain 100% compliant with Store terms and conditions without integrated update mechanisms (isStoreBuild()).

Multi-format clipboard engine

• Captures plain text, URLs, rich HTML, raw images, and multi-file selections
• Win32 FileNameW / HDROP parsing via PowerShell to bypass Electron's single-file limit
• Respects password-manager and dictation-tool privacy flags (case-insensitive matching)
• Smart deduplication — re-copies bump hitCount and move the item to the top
• Incognito mode — one click suspends polling for sensitive data
• Auto-delete timer options (Never / 1h / 6h / 24h / 7d) and clear unpinned on restart

Direct URL Detection & One-Click Launch

• Quick Action Links: Dedicated external link launcher (ExternalLinkIcon) on URL item cards and inside Preview Flyouts.
• Browser Launch: Clicking the link button opens URLs directly in your default web browser without requiring manual copy/pasting.

Native OS drag & drop

• webContents.startDrag() hands real file handles to external apps
• Custom drag icons: stacked card PNGs with count badges, styled text cards, real image thumbnails
• Drag-in: drop files onto the shelf to add them; drag-out: drop anywhere — Photoshop, Word, Explorer, Slack

Fluid collections & stacks

• Auto-group multi-file drag-ins and multi-image copies into 3D card stacks (max 10)
• Preview Flyout Drag-to-Stack: Drag any shelf item directly onto an open Preview Flyout to stack and merge them seamlessly
• Expand stacks with a single click on the Expand action button or Preview Flyout; drag a sub-item to the screen edge to split it back out

UI / UX

• macOS Segmented Control 5-Category Filter Suite: Integrated 5-type filter bar (All, Text, Links, Images, Files) with a single persistent sliding spring indicator pill (stiffness: 500, damping: 35) and zero shape distortion.
• Independent Pinned Section State per Filter: Each filter category tab maintains its own independent pinned section collapse/expand state (collapsedMap), persisted across sessions in localStorage.
• Unified Image Entity Classification: Native screenshots (Win + Shift + S) and copied image files (.png, .jpg, .webp, .svg) are unified under the Images filter tab with visual thumbnail cards.
• HD Anti-Aliased Curved Edges: GPU layer promotion (transform: translateZ(0)), -webkit-background-clip: padding-box, and smooth vector rasterization delivering 100% HD anti-aliased curved borders across all display scales.
• Tactile Micro-Interactions & Spring Motion: Card hover 2px lift with ambient backlight glow, micro radial copy ripple effect, and smooth Framer Motion layoutId spring list reflow (stiffness: 500, damping: 32).
• Refined Obsidian Aesthetics & Multi-Layer Depth: Dual-layer 3D glass hairline highlights (inset 0 1px 0 rgba(255, 255, 255, 0.12)) and dual typography hierarchy (monospaced JetBrains Mono metadata + Inter/SF Pro system title font stack).
• Ergonomic Card Action Bar & Safety Guard: Re-ordered card actions (Pin, Expand, Copy, Open Link, Divider, Delete) with a physical safety hairline divider and 100% layout consistency across normal hover and preview mode.
• What's New Release History View: Integrated in-app release notes timeline viewer (ChangelogView.tsx) connected to live GitHub Releases API with pure formatted text highlights and zero-lag offline fallbacks.
• Lucide-React Vector Icon Suite: Powered by official lucide-react vector icons for crisp graphics across headers, item cards, and settings.
• Dynamic Preview Flyout: Responsive layout for single files and multi-file collections with calibrated hover boundary tracking.
• Customizable Copy Indicator Styles: Select from 4 vector copy indicators (Edge-Drop Logo, Tick, Copy, and Sparkle) in a 2x2 grid flyout selector.
• Universal Click-to-Paste: Click any text snippet, image thumbnail, or file tile inside Preview Flyout to instantly paste into active desktop applications.
• Minimalist macOS aesthetic — deep black obsidian surface, hairline borders, and adaptive spring physics (useAdaptiveSpring).

Edge-Drop is organized into three strictly isolated layers:

1. Main Process (electron/main/): Node.js runtime handling OS integrations, Win32 OLE drag pipelines, Windows DPAPI encryption (safeStorage), native ClipboardWatcher polling, and background auto-updates (updater.ts).
2. Preload Sandbox (electron/preload/): Context-isolated bridge (contextBridge.exposeInMainWorld('edge', api)). Consumes single-source-of-truth contracts in shared/ipc.ts (InvokeMap, EventMap, SendMap) and shared/bridge.ts (EdgeApi).
3. Renderer Process (src/): React 18 UI powered by Zustand state management (appStore.ts), Web Audio synthesis (soundEffects.ts), and Framer Motion spring physics (useAdaptiveSpring.ts).

• ClipboardWatcher.ts: Polls system clipboard every 600ms. Computes cheap FNV-1a hashes over BGRA bitmap bytes for zero-overhead image deduplication.
• ItemStore.ts: Atomic JSON persistence with safeStorage DPAPI encryption, automatic duplicate bumping, and stack merging/splitting.
• soundEffects.ts: Synthesized Web Audio API sound suite (dial ticks, button clicks, toggle pops, delete thuds) with global toggle controls.
• updater.ts: Singleton autoUpdater module handling background downloading and single-click restart installation for GitHub builds, gated behind !isStoreBuild().
• drag.ts: Server-side SVG → PNG icon rendering via @resvg/resvg-js for stacked drag ghosts.

Edge-Drop touches the OS clipboard, the filesystem, and the Win32 OLE drag pipeline — so the security posture is intentional, not optional.

Edge-Drop/
├─ shared/                 Typed IPC contracts & domain models
│  ├─ types.ts             ClipboardItem, Bundle, Settings, DragRequest DTOs
│  ├─ bridge.ts            EdgeApi preload interface
│  └─ ipc.ts               InvokeMap / EventMap / SendMap channel definitions
├─ electron/               Node.js backend & OS integrations
│  ├─ main/
│  │  ├─ index.ts          Single-instance lock, IPC registration, startup
│  │  ├─ window.ts         Frameless window, setIgnoreMouseEvents, cursor poll
│  │  ├─ updater.ts        Background auto-update engine (electron-updater)
│  │  ├─ tray.ts           System tray icon & context menus
│  │  ├─ fullscreen.ts     Windows SHQueryUserNotificationState game detection
│  │  └─ drag.ts           OLE startDrag, temp-file staging, icon generation
│  ├─ preload/             Sandbox bridge exposing window.edge
│  ├─ clipboard/
│  │  ├─ ClipboardWatcher.ts   600ms poll loop, transient-copy rejection
│  │  └─ formats.ts        FNV-1a signatures, Win32 HDROP, privacy-flag detection
│  └─ store/
│     ├─ ItemStore.ts      Atomic JSON persistence, DPAPI encryption, dedup
│     ├─ settings.ts       User config & startup registration
│     └─ paths.ts          AppData + temp directory resolution
├─ src/                    React renderer
│  ├─ components/          Panel, ItemList, ClipboardItem, SearchBar, Settings, ChangelogView, Icons
│  ├─ hooks/               useEdgeHover (hysteresis), useDragOut, useFilteredItems
│  ├─ lib/                 soundEffects (Web Audio API), theme tokens, format helpers
│  ├─ store/               Zustand appStore
│  └─ styles/              tokens.css, panel.css, settings.css, item.css, global.css

Edge-Drop is in public beta. The following are planned, in rough priority order:

Edge-Drop is Apache-2.0 licensed and open to contributions. As a solo-maintained project in active beta, the best ways to help right now are:

1. File issues for bugs, crashes, or privacy-edge-cases you hit (especially around clipboard format detection on different apps)
2. macOS porting — Currently Edge-Drop only supports Windows; contributions for a macOS port are welcome
3. Suggest format readers — if you copy from an app whose content Edge-Drop mis-categorizes, open an issue with the available formats list (clipboard.availableFormats() output)
4. Pick up a roadmap item — open an issue first to discuss scope, then send a PR against a feature branch

npm install
npm run dev          # Electron + Vite HMR
npm run typecheck    # tsc --noEmit (node + web configs)
npm run build:github # build Windows NSIS installer for GitHub
npm run build:store  # build Windows AppX package for Microsoft Store

Apache License 2.0 — see LICENSE. Commercial and non-commercial use, modification, and distribution all permitted with attribution.