Web page element capture

MAC OS Program element capture

Universal UI capture and inspection tool.

macOS Desktop application for inspecting and capturing UI elements across the entire system, similar to Chrome DevTools inspector but for the OS.

• Global Inspector: Hover over any window, button, or UI element on your screen to see it highlighted.
• Info HUD: Real-time display of element role and dimensions (e.g., Button | 120 × 40).
• Smart Capture: Click the highlighted element to instantly capture it to your clipboard.
• Enhanced Visibility: Inset highlight ensures visibility even at screen edges.
• System Tray Integration: Runs quietly in the background.
• Global Shortcut: Activate the inspector on demand.

1. Clone the repository
2. Install Dependencies:

   npm install

3. Run Development Build:

   npm run tauri dev

To build a production-ready application bundle:

1. Standard Build:

   npm run tauri build

2. Build with Version Update: If you want to specify a new version before building:

   npm run build:to --new_version=1.1.0

   This command will update package.json and Cargo.toml to the specified version and then run the build process.

The generated application bundle will be located in src-tauri/target/release/bundle/.

1. Grant Permissions:

   • On first launch, you must grant Accessibility and Screen Recording permissions to the app (or your terminal if running in dev mode).
   • If the app doesn't work, check System Settings > Privacy & Security and ensure permissions are enabled.

2. Start Inspection:

   • The app launches in the background (check the Menu Bar for the icon).
   • Press Cmd + Shift + X (or Ctrl + Shift + X) to activate the overlay.

3. Capture:

   • Move your mouse to highlight the desired UI element.
   • Click to capture.
   • The overlay will close, and the screenshot is now in your Clipboard. Paste it anywhere (Cmd + V).

4. Quit:

   • Click the tray icon in the menu bar and select Quit.

• Frontend: React + TypeScript (Visual Overlay)
• Backend: Rust (Tauri, Accessibility API, CoreGraphics)
• State Management: Tauri Events (element-hover)

MIT