SnapInk

A macOS menu bar screenshot and annotation tool. Capture any region, window, or full screen, annotate with 8 drawing tools, then save to file, copy to clipboard, or pin as a floating overlay.

Features

Capture modes

Annotation tools

Export options

• Save to file — PNG or JPEG, to a configurable folder with date-based filenames
• Copy to clipboard — with optional Retina (2×) resolution
• Pin — float the annotated image as a transparent always-on-top overlay

Requirements

• macOS 12 or later
• Screen Recording permission (requested on first capture)

Development

All commands run from the app/ directory.

# Install dependencies
npm install

# Development (Vite on :1420 + Tauri hot reload)
npm run tauri dev

# Type-check the frontend
npm run check
npm run check:watch

# Production build (.dmg)
npm run tauri build

Run tests

cd app/src-tauri
cargo test --lib

Architecture

macOS menu bar / global shortcuts
          ↓
   Rust backend (Tauri 2)
          ↕  invoke() / events
   Webview (SvelteKit + Svelte 5)

The app runs as a persistent menu bar agent (LSUIElement = true). Windows are created on demand and hidden on close rather than destroyed, so the process stays alive.

Process flow: Capture → Edit → Export

1. Tray menu or hotkey → open_capture_cmd → spawns the /capture overlay window (full screen, decorations off, always on top)
2. Before the overlay appears, a background screenshot is taken and stored in CaptureStore so the overlay can render a frozen background instantly
3. User selects a region → crop_and_store crops and saves the result in CaptureStore
4. open_editor_cmd opens the editor window; it calls consume_capture_result() to drain the store
5. Editor renders the image on a Konva.js canvas; annotations are pushed into appStore
6. Save / Copy / Pin calls Rust export commands

Scrolling capture flow

1. User selects a region in the capture overlay and clicks "Start Scrolling Capture"
2. start_scroll_capture_cmd stores the physical-pixel region, closes the overlay, and opens a small floating pill window
3. The pill calls start_auto_scroll_capture_cmd, which spawns a background thread that:
   • Posts CGEventCreateScrollWheelEvent2 scroll events every 300 ms (auto-scrolls the content under the cursor)
   • Captures a frame of the stored region after each scroll
   • Deduplicates consecutive identical frames
   • Emits scroll-frame-added events to update the frame counter in the pill
4. User presses Space or clicks Stop → stop_scroll_capture_cmd sets an AtomicBool flag → loop exits → scroll-capture-done event fires
5. stitch_scroll_frames aligns and merges all frames using overlap detection → result stored → editor opens

Frontend state

Svelte 5 runes ($state, $derived) in stores.svelte.ts:

Routes

Backend modules

IPC commands

Settings

Settings are stored at ~/Library/Application Support/SnapInk/settings.json.

Filename pattern tokens

Key conventions

• Image data over IPC is always base64-encoded PNG (String)
• Rust types in types.rs and TypeScript types in src/lib/types.ts are manually kept in sync
• All windows are opened via Rust (open_*_cmd commands) — never window.open() from the frontend
• Global hotkeys use Ctrl+Shift+[3-7, R] to avoid conflicts with macOS system shortcuts
• The editor window is hidden on close (not destroyed) so the process stays alive as a menu bar agent

Known gaps

• Hotkey recorder — settings shows current bindings but cannot interactively rebind them
• Code signing / notarization — not yet set up for distribution outside local development