web frames
Cross-origin DOM inspection
Browsers block page-to-iframe DOM access across origins. Web Frames runs in Electron with webSecurity:false — the inspection bridge reaches into any frame: localhost, Figma, your staging, production.
Desktop app
An infinite canvas for any web page.
Drop URLs onto a dot-grid — localhost dev servers, GitHub previews, production sites. Inspect the DOM across origins, link frames together, annotate elements, and hand structured context to your AI coding agent.
What it does
Infinite canvas, linked frames
Drop as many URLs as you want onto a zoomable dot-grid. Pull directed arrows between frames to capture flows, comparisons, before/after. Everything persists locally.
Annotate elements, not screens
Click any element to drop a pin. Web Frames captures the CSS selector, DOM path, component name (React/Vue/Svelte/Angular), computed styles, and a PNG snapshot of the element itself — not just a rectangle on a screenshot.
MCP for AI coding agents
Expose your annotations over MCP. Cursor, Claude Code, and other AI coding tools read the structured context — selector, component, screenshot, free-text comment — and edit the right file on the first try.
How it works
Step 1
Install the desktop app
macOS, Windows, and Linux. Signed + notarized on Mac, silently auto-updates via GitHub Releases.
Step 2
Drop any URL on the canvas
Localhost dev servers (yes, even from a packaged app), GitHub file previews, production sites, Figma embeds — any URL becomes a frame.
Step 3
Inspect, annotate, hand off to AI
Click an element, write a comment, link frames together. Your agent reads the whole pack via MCP and makes the change.
Download
Auto-updates via GitHub Releases — download once, new versions install silently.
Need a specific build? Browse all releases.