GitHub - wlswo/xray: A simple, intuitive, and light universal UI capture and inspection tool for macOS

2 min read Original article ↗

Xray Logo

green line


green line


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.

Features

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

Setup & Installation

  1. Clone the repository
  2. Install Dependencies:
  3. Run Development Build:

Building for Production

To build a production-ready application bundle:

  1. Standard 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/.

How to Use

  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.

Architecture

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

License

MIT