Image Crop
An Electron + React desktop app that pastes images from clipboard, crops them in rectangular or circular shapes, and auto-saves to your Pictures folder.
A lightweight desktop cropper built with Electron and React. Paste an image, select a shape (rect or circle), zoom with scroll, and auto-save crops to a configurable directory.
- Electron
- React
- Vite
- Tailwind CSS
- react-cropper
- cropperjs
- Node.js
- SWC
I built this to speed up my screenshot workflow. Instead of juggling separate cropping tools, I wanted a single app that lives on my desktop: paste an image (Ctrl+V), immediately start cropping, and save without friction. The app detects clipboard image data and renders it directly into an editor canvas.
The core cropper is powered by react-cropper (which wraps cropperjs), with custom handlers layered on top. Tab toggles between rectangle and circle crop modes. Scroll zooms centered on your cursor. Middle-click and drag pans the image around the viewport. A minimap in the sidebar shows your current view position—useful for large images. Once you're happy with the selection, press Ctrl to save; the cropped image auto-saves to your Pictures folder by default, but you can change the save location from the UI.
The UI is Tailwind-based with a resizable sidebar that tracks zoom level, current crop mode, keyboard shortcuts, and the last saved file path (clickable to open in your system viewer). The Electron main process handles file I/O and the system save dialog via IPC. CSP is strict in production but relaxed in dev to allow HMR.
- Clipboard paste to canvas, with immediate image detection and rendering
- Tab-toggle between rectangular and circular crop modes with visual feedback
- Scroll-to-zoom centered on mouse position; middle-click-drag to pan the image
- Live minimap with viewport indicator and click-to-navigate; resizable sidebar
- Auto-save crops as PNG with configurable save location; clickable file link in sidebar