Pixel Lens

PixelLens is the spatial visual inspector built natively for Apple Safari on macOS and iOS. Engineered for UI/UX designers, design engineers, and frontend developers who need instant optical precision without digging through nested browser DevTools. KEY CAPABILITIES 1. Sub-Pixel Element CSS Hover over any web element to inspect computed box models, padding, margins, line-heights, and live typography metrics. Click once to lock any element—including buttons and form controls—without triggering page events or navigation. 2. Dynamic SVG & Vector Scaler Detect inline SVGs and images instantly. Re-normalize viewBox dimensions and scale vector coordinates up to 512px with zero clipping, then export clean XML or download directly to disk. 3. DOM to Code Cloner Convert inspected elements into clean Tailwind CSS classes and React JSX components with one click. 4. Real-Time Tech Intel & Web Vitals Measure First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS) on-device using pure WebKit APIs. Detect front-end frameworks and CDNs automatically. 5. Accessible Contrast Verification Instant WCAG AAA contrast ratio calculation with automatic pass/fail ratings for foreground and background colors. PRIVACY & PERFORMANCE • 100% On-Device: All inspections execute locally in Safari's isolated sandbox. • Zero Telemetry: No tracking pixels, no analytics SDKs, and no external servers. • Closed Shadow DOM: PixelLens UI never pollutes or conflicts with host page styles. • Compliant with App Store Guideline 5.1.1.