Playwright Spatial Layout Mcp
Gives Claude real browser geometry so it can reason about overlapping elements, off-screen buttons, and responsive layout shifts that don't show up in the DOM. You get four tools: extract_bounding_boxes returns coordinates and viewport visibility for selectors, detect_visual_occlusion computes intersection ratios between elements, verify_spatial_relationships validates layout rules like "nav is above hero" or "sidebar doesn't overlap content", and compute_viewport_reflow tracks how elements shift across mobile to desktop breakpoints. Built on Playwright's bounding box APIs. Useful when debugging CSS issues in CI, validating responsive designs, or investigating why a clickable element isn't actually clickable in certain viewports.
- tools
- 4
- transport
- STDIO
- last updated
- May 19, 2026
Tools
4 toolsPublic tool metadata for what this MCP can expose to an agent.
extract_bounding_boxesReturns position, size, z-index, and viewport visibility for one or more elements.
Returns position, size, z-index, and viewport visibility for one or more elements.
No parameter schema in public metadata yet.
detect_visual_occlusionChecks if one element physically overlaps another by computing bounding box intersection.
Checks if one element physically overlaps another by computing bounding box intersection.
No parameter schema in public metadata yet.
verify_spatial_relationshipsValidates a set of layout rules and returns pass/fail with a human-readable reason per rule.
Validates a set of layout rules and returns pass/fail with a human-readable reason per rule.
No parameter schema in public metadata yet.
compute_viewport_reflowMeasures how element positions and sizes change across multiple viewport sizes.
Measures how element positions and sizes change across multiple viewport sizes.
No parameter schema in public metadata yet.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageReadme
playwright-spatial-layout-mcp 🐸📐
An MCP server that gives AI agents geometric spatial awareness of web page layouts using Playwright.
AI agents can read the DOM and know a button exists — but they can't see that it's hidden under a sticky header, pushed off-screen by a broken CSS rule, or overlapping another element on mobile. This MCP fixes that by exposing real bounding box mathematics from a live browser.
🤔 The Problem
When an AI agent analyzes a Playwright test failure, it reads the accessibility tree:
Details
- Repository
- github.com/vola-trebla/playwright-spatial-layout-mcp
- Category
- Web & Browser Automation
- Package
playwright-spatial-layout-mcp- Transport
- STDIO
- Registry
- MCP registry, active
More from vola-trebla
- Sourcemap Retrace Mcp
- Tailwind Context Resolver Mcp
- Tsconfig Inheritance Flattener Mcp
- V8 Cpu Profile Decoder Mcp
- Release Readiness Triage Mcp
- React Render Profile Mcp2
- Playwright Trace Decoder Mcp1
- Ast Impact Mapper Mcp
- Env Secret Exposure Analyzer Mcp
- Flakiness Knowledge Graph Mcp
- Ndjson Local Log Triage Mcp
- Playwright Network Chaos Mcp
Related Web & Browser Automation MCP servers
View all
Vessel Browserunmodeled-tyler/vessel-browserAI-native browser runtime for autonomous agents with human-in-the-loop supervision90stars
HasData Web Scrapinghasdata/web-scraping-mcpFetch any public web page through managed proxies, with optional JS rendering and extraction rules.7stars
Headless Trackertamaspetki/headlesstrackerRead-only MCP server: your AI sees your crypto portfolio, never your keys. Not financial advice.6stars
Android Puppeteer Mcppedro-rivas/android-puppeteer-mcpMCP server for Android automation with UI interaction, screenshots, and device control4stars
Playwright Trace Decoder Mcpvola-trebla/playwright-trace-decoder-mcpMCP server for unpacking and analyzing Playwright trace.zip archives1stars
WordPress Headlessaj-ua/wp-headless-mcpRead WordPress content, ACF fields, and Yoast SEO data, and safely edit drafts.0stars