Media
3 items
Description
See any page as extruded 3D blocks stacked by DOM depth. Rotate, zoom, hover for the ancestor chain, click to inspect in DevTools. Strata turns the page you're looking at into a 3D model of its DOM. Every element becomes a block, and each level of nesting lifts it one step higher, so you can see the structure of a page the way you'd see the layers of a cake: where the wrappers pile up, where the depth is, and what sits on what. The blocks show the real page. The top of each one is textured with a screenshot of the tab, so text, images and controls look exactly as rendered. The sides are colored by depth. WHAT YOU CAN DO • Rotate, pan and zoom around the page with the mouse or arrow keys. • Hover any block to highlight it and see its full ancestor chain, including shadow roots, with sizes and depth. • Click a block to reveal that element in the DevTools Elements panel. • Adjust the height of each layer to flatten or exaggerate the structure. • Capture more of the page as you scroll, or refresh after the page changes. WORKS WITH MODERN SITES Strata reads the composed tree, so pages built from web components with shadow DOM get full depth inside their components. The page itself is never modified, so nothing on it breaks, and there is no impact until you turn the view on. PRIVACY Strata only runs on the tab you click it on, and only when you click. The screenshot it takes stays in memory in that tab and is discarded when you close the view. Nothing is sent anywhere, no data is collected, and there are no accounts or settings to sync. USE IT FOR • Understanding an unfamiliar page's layout before you touch it. • Spotting excessive wrapper nesting in your own markup. • Explaining DOM structure to someone who has never opened DevTools. • Just looking at the web from a different angle. Toggle with the toolbar button or Alt+Shift+S. Press Esc to exit.