“Tilt”: Web Page DOM Tree in 3D

Tilt Addon
Tilt Addon

Tilt is a Firefox extension that lets you visualize any web page DOM tree in 3D. It is being developed by Victor Porof (3D developer responsible with the Firefox extension itself), along with Cedric Vivier (creating a WebGL optimized equivalent to the privileged canvas.drawWindow, see #653656) and Rob Campbell (who first thought about creating a 3D visualization of a webpage). Everything started initially as a Google Summer of Code project, but now, with an enthusiastic team behind it and so many new features and ideas, it has become an active Developer Tools project.

A webpage’s Document Object Model, better known as the DOM, is typically visualized as a tree, with nested HTML nodes arrayed like leaves around the trunk of the page (the <body> tag). Tilt uses the same idea, but maps the DOM into a 3D object, so that nodes are stacked on top of each other. You can then interact with the resulting visual model, tilting, rotating, flipping, panning, zooming and otherwise exploring the page structure within the browser window.

Since the DOM is essentially a tree-like representation of a document, this tool layers each node based on the nesting in the tree, creating stacks of elements, each having a corresponding depth and being textured according to the webpage rendering itself

For now, to test the extension, just download the latest stable build (tilt.xpi: download the file, then open it with Firefox or drag’n drop it on Firefox), install it and search for Tilt inside the Tools menu. Or, you can use Ctrl+Shift+L (or Cmd+Shift+L if you’re on a Mac) to start the visualization. Close it at any time with the Esc key. Tilt works with any webpage, so you can even inspect this blog to see how it looks in 3D.

Tilt source code and the latest extension builds on Github, and a development blog with milestone updates on blog.mozilla.com/tilt.