Peekly

About

Peekly is a near-invisible developer inspector that turns any web page into an interactive component map.

How it works

Hold the x key and hover any element. Peekly highlights the React component under your cursor and displays a contextual tooltip with detailed information, organized into tabs (Comp / DOM / CSS / A11y).

The tooltip is sticky: when you release the x key, it stays on screen so you can interact with it. You can dismiss it at any time by clicking outside or pressing Esc.

If you click while holding x, a full floating panel opens, giving you deeper access to the component and its environment.

What you get in the panel
- Source file access — one-click “Open in VS Code / Cursor / WebStorm / Sublime”
- Live re-render counter to track component updates
- Parent / children navigation via clickable chips (no need to move the mouse)
- Props inspection with smart serialization
- Computed styles for precise UI debugging
- Tailwind / UnoCSS breakdown, grouped by variant
- Accessibility audit (alt, aria-label, WCAG contrast)
- Hints for dangerouslySetInnerHTML and oversized classNames
- Owner chain to understand component hierarchy
- Network inspector

Press y to toggle a draggable panel that captures every fetch and XHR request on the page in real time.

This includes:

- Filtering by method, status, or search
- Full inspection of headers and request/response bodies
- Automatic TypeScript interface generation
- GraphQL analysis
- Call stack tracing for each request
- Detection of N+1 patterns
- Design principles

Peekly is built around speed and minimal friction:

- Uses plain letter keys → reachable with one hand
- Avoids conflicts with OS/browser shortcuts (Option, Shift, Ctrl)
- Never captures input while you're typing in a form field
- Runtime behavior
- Automatically enabled on localhost
- Panels are fully draggable
- Works seamlessly inside iframes
- Hardened against malicious sites
- Uses whitelisted editor protocols only
- No network egress whatsoever
- Open source

Peekly is free, MIT-licensed, and fully open source:
https://github.com/rosoam/peekly

Peekly is built with strict privacy guarantees:

Zero tracking
Zero external requests
Settings stored locally via chrome.storage

More details:
https://github.com/rosoam/peekly/blob/main/PRIVACY.md