Overview
Overlay and label page structure — headers, navs, grids, flex containers and more. Built for layout replication.
Site Layout Inspector lets you visualise the structural layout of any webpage with color-coded overlays and labels. Click Activate and instantly see how a page is built — headers, footers, navigation, grids, flex containers, and more — all highlighted directly on the page. HOW IT WORKS 1. Click the extension icon and press "Activate" 2. Color-coded overlays appear on the page showing element boundaries and tags 3. Hover over any overlay to see a detailed info panel with CSS properties 4. Toggle layer categories on/off to focus on specific element types 5. Click "Export Layout" to download a JSON file of the full page structure SEVEN LAYER CATEGORIES Each layer is color-coded and can be toggled independently: - Structural (blue) — header, footer, main, section, nav, aside, article, and ARIA landmark roles - Navigation (purple) — nav elements, menus, dropdown wrappers - Content (green) — main content areas, hero sections, call-to-action blocks - CSS Grid (orange) — any element using display: grid - Flexbox (red) — any element using display: flex - Media (teal) — images, videos, iframes, and embedded content - Forms (amber) — form elements, input groups, fieldsets HOVER INSPECTION Hover over any overlay to see a details panel showing: - Tag name, ID, and class list - Display and position values - Dimensions (width x height) - Padding and margin values - Font size and family - Flex direction, grid columns (when applicable) - Background color, text color, z-index, and overflow EXPORT Click "Export Layout" to download a JSON file containing every structural element on the page with its tag, classes, dimensions, and computed layout properties. Useful for design handoff and layout documentation. PRIVACY - All inspection runs locally in your browser - No data is sent to external servers - No tracking or analytics - Scripts are only injected when you click Activate — never passively Built for frontend developers, UI designers, and anyone who wants to understand how a webpage is structured. Made by Cosmos Web Tech — Digital Solutions for Sydney Businesses
Details
- Version1.0.0
- UpdatedApril 15, 2026
- Size17.66KiB
- LanguagesEnglish
- DeveloperAshish GandaWebsite
18 Patel St Rouse Hill, NSW 2155 AUEmail
ash@eawesome.com.auPhone
+61 433 309 677 - TraderThis developer has identified itself as a trader per the definition from the European Union and committed to only offer products or services that comply with EU laws.
Privacy
Site Layout Inspector has disclosed the following information regarding the collection and usage of your data. More detailed information can be found in the developer's privacy policy.
Site Layout Inspector handles the following:
This developer declares that your data is
- Not being sold to third parties, outside of the approved use cases
- Not being used or transferred for purposes that are unrelated to the item's core functionality
- Not being used or transferred to determine creditworthiness or for lending purposes
Support
For help with questions, suggestions, or problems, visit the developer's support site
