xray — Intuitive UI capture and inspection for macOS…

Pitch

Description

Comments

About this project

Xray is a universal UI capture and inspection tool designed for macOS, offering similar capabilities to Chrome DevTools but for your desktop applications. Instantly inspect and capture UI elements with ease, view real-time information, and enhance your workflow with global shortcuts. Perfect for developers and designers looking to streamline their UI interactions.

Xray - A Universal UI Capture and Inspection Tool for macOS

Xray is a lightweight and intuitive desktop application designed for macOS, enabling users to capture and inspect UI elements across the entire operating system. This tool is reminiscent of the Chrome DevTools inspector, but tailored for macOS, providing an easy way to interact with any UI component on the screen.

Key Features

Global Inspector: Easily hover over any button or window to highlight it for inspection.
Info HUD: Instantly view the role and dimensions of elements in a real-time overlay (e.g., Button | 120 × 40).
Smart Capture: Click on highlighted elements to copy them straight to the clipboard with one simple action.
Enhanced Visibility: Features an inset highlight for improved visibility, even at the edges of the screen.
System Tray Integration: Operates seamlessly in the background, ensuring a smooth user experience.
Global Shortcut Activation: Quickly activate the inspector with user-defined shortcuts.

How to Use Xray

Grant Permissions: During the initial launch, grant the required Accessibility and Screen Recording permissions to allow the app to function correctly. Check System Settings > Privacy & Security if any issues arise.
Start Inspection: Xray runs in the background (find the icon in the Menu Bar). Activate the overlay using the global shortcut: Cmd + Shift + X (or Ctrl + Shift + X).
Capture Elements: Move the mouse to highlight the UI element of interest, then click to capture it. The overlay will close, and the captured screenshot will be available in your clipboard for immediate pasting using Cmd + V.
Quit Xray: Close the application by clicking on the tray icon in the menu bar and selecting Quit.

Technical Overview

Frontend: Built with React and TypeScript to create a responsive visual overlay.
Backend: Utilizes Rust, Tauri for system accessibility, and CoreGraphics for rendering.
State Management: Employs Tauri Events for effective communication and state handling, including element-hover events.

Xray simplifies UI inspections on macOS, making it an essential tool for developers, designers, and anyone looking to capture and analyze user interface elements effortlessly.