dom3d
the rendered dom as stacked plates — every visible element pushed out of the page by its nesting depth. the firefox devtools "tilt" view, removed in 2017, rebuilt as a zero-dependency library. css 3d transforms, no webgl, ~10 kb.
this page is the specimen. everything below is built from the same design system every app here renders, so tilting it shows you the shell, the cards and the controls as plates.
heatmaps
colour answers a question. that is the whole point — it is a debugging tool, not a toy.
| mode | colours by | the question it answers |
|---|---|---|
depth | nesting depth | how deep is this tree, really? |
subtree | descendant count | which subtree is 4000 nodes? |
zindex | z-index / stacking contexts | where do my layers actually sit? |
tags | tag category | what is this page made of? |
specimen
nested on purpose — cards inside a grid, a stacking context, a shadow root, a form. tilt the page and this is the interesting part.
nested card
text with bold and italic inside it, then a list:
- one
- two
- three
switch to zindex and these separate out.
shadow roots and same-origin iframes are traversed too.
controls
| input | action |
|---|---|
drag | orbit |
shift-drag · right-drag | pan |
wheel | zoom |
double-click | reset the view |
hover · click | inspect · pin and log to console |
alt-click | jump to the element on the page |
1–4 · e · x | heatmap mode · extrude · export png |
esc | close |
use it anywhere
no build step, no dependencies. drop the script on a page and call it.
<script src="https://dom3d.mianda.dev/dom3d.js"></script> <script>DOM3D.toggle()</script>
DOM3D.show({
mode: 'depth', // depth | subtree | zindex | tags
extrude: false, // side walls — the true tilt look
spacing: 14, // px per nesting level
maxTiles: 3000 // safety cap for huge pages
})
DOM3D.setMode('subtree')
DOM3D.exportPNG() // downloads; pass false for a dataURL
DOM3D.hide()
or keep it in the bookmarks bar and tilt any page you are looking at — drag this up: