GitHub - Deepender25/Edge-Drop: Edge-Drop is like a Dynamic Island for your desktop clipboard. It hides on the edge of your screen and opens when you hover near it, letting you easily store and drag text, links, images, and files directly into any application.

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

Why 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.

Demos

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

1. Welcome to Edge-Drop placeholder_welcome.mp4

2. Collect Anything placeholder_copy.1.mp4

3. Drag & Drop Anywhere placeholder_drag.mp4

4. Explore File Stacks placeholder_stacks.mp4

5. Ungroup & Split Stacks placeholder_ungroup.mp4

6. Combine & Merge Items placeholder_merge.mp4

7. Preview Flyout Preview_Flyout.mp4

Quick Start Prerequisites

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

Run from source git clone https://github.com/Deepender25/Edge-Drop.git cd Edge-Drop npm install npm run dev # launches Electron + Vite HMR Type-check npm run typecheck # runs tsc --noEmit against both node and web configs Build Windows installers npm run build:github # outputs an NSIS .exe for GitHub releases npm run build:store # outputs an MSIX .appx for Microsoft Store submission NoteOn Windows, if packaging fails with EBUSY: resource busy or locked, close any running Edge-Drop instances first: taskkill /F /IM electron.exe /T.

Features 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