Debugging and editing webpages in 3D

Tilt is a Firefox addon that lets you visualize any web page in 3D. A new update is available, coming with more developer-oriented features. Try the addon.

Since the first alpha version of Tilt was announced (a Firefox extension focused on creating a 3D visualization of a webpage), a lot of work has been done to add a great number of developer-oriented features. These focus on debugging the structure of a webpage, inspecting styling and attributes for each node and seamlessly refreshing the visualization when the DOM structure changes or after contents of document are repainted.

Solve nesting problems

Tilt is useful when searching problems in the HTML structure (like finding unclosed DIV elements for example) by providing the extra third dimension, layering each node based on nesting in the DOM tree. Stacks of elements visually represent branches in the DOM, and each node can be inspected for the inner HTML contents, its computed CSS style and the attributes.

Clicking anywhere on the visualization highlights a color-coded rectangle surrounding the corresponding node. Double click shows up the source preview for that node. Tilt also tries to show the most relevant information when needed (one is most likely to inspect the attributes of an input, button or image element, for example, but can easily switch between HTML, CSS and attributes view at any time).

Minidom map

The “minidom” is a tree view representation showing a minimalistic snapshot of the document object model. Each node is assigned a color associated by tag name (blue for div, green for span etc.) and represented as a strip, along with visual markers for the id and/or class if available. Each one of these strips also has a width relative to the type, id and class name length for the respective element, and the corresponding 3D stack in the visualization has color-coded margins. The coloring for individual elements is easily changeable using the color picker near to the minidom legend.

Clicking a strip in the tree view (or directly a stack on the 3D document visualization mesh) also highlights the node with a colored quad. This behavior is a good way to relate with the Style Inspector, and a more unified interaction between Tilt and other Developer Tools is planned in the future. All of these additions make it easier to analyze the bounds of each node, along with the HTML, computed CSS and attributes.

Realtime editing

Because Tilt is able to detect when a webpage’s DOM structure changes or when a repaint is necessary, integration is seamless with existing Developer Tools. Using Tilt and Firebug or Style Editor at the same time is easy. One can enable or disable CSS properties, changing the style of a node, and the visualization changes accordingly.

To enable realtime updates for the 3D webpage, go to the Options menu and check “Refresh visualization”.

Useful for learning

Developer tools such as “view source” have always been used to help people learn about web development. The 3D view highlights the structure of a page better than a flat view, thus anyone can immediately understand the parent-child relationship between nodes in a webpage, their positioning and how the layout is influenced.

One use case for this is the Hackasaurus mashup. The X-Ray Goggles is a nice and fun tool designed to make it easier to learn about the different document node types, the “building blocks” which create a webpage.


A requested feature was the ability to export the visualization as a 3D mesh, to be used in games or other 3D editors. Tilt adds the ability to export to .obj, along with a material .mtl file and a .png texture (a screenshot of the entire webpage). The open .obj format ensures the fact that the mesh can be opened with almost any editor. Here’s a ray-traced rendering of in Blender:

Fun with experiments

As soon as it was released, many people found clever and interesting alternative ways to interact with Tilt. One experiment was creating a 3D visualization of an image, by exporting chunks of pixels to a HTML representation. The result was a voxel-like representation, with node blocks and stacks instead of pixels. A simple Image2Tilt converter was written in JavaScript, and you can try it directly in the browser.

Accelerometer support was another addition based on community request. This shows how easy it is to add functionality that wasn’t originally planned.

You can view the source code, fork it and also contribute to the addon with ideas or feature requests on Github, at

Available as an addon

The latest version of Tilt can be found on Github, but you can also download Tilt as an addon from

For compatibility, Tilt requires WebGL capabilities. Go to to check availability and troubleshoot any issues. The current version works with Firefox 6.0 to latest 10.0 Nightly releases (latest Nightly builds now also support WebGL anti-aliasing, working great with Tilt).

To start Tilt, hit Control+Shift+M (or Command+Shift+M if you’re on Mac OS), or go to Web Developer -> Tilt, available in the Firefox application menu (or the Tools menu on Mac OS). You can modify this hotkey (and other properties) from the Options menu after starting Tilt.

More information about Tilt, the development process and milestone updates can be found on


Tilt has become an active Developer Tools project, and an ongoing effort is made to integrate it with other existing tools like Style Inspector and Style Editor (source code and latest builds). As the 3D view of a webpage has proven to be useful for debugging, this main functionality will gradually become part of Firefox in future releases.

About Victor Porof

Mozillian, hacker, working on Firefox DevTools.

More articles by Victor Porof…


  1. Danny

    Not available for Firefox 4.0.1

    October 26th, 2011 at 10:16

    1. seriously


      You always stare at walls of text without reading?

      October 28th, 2011 at 14:35

  2. CSSmetal

    @Danny: It’s mentioned that the current version “works with Firefox 6.0 to latest 10.0 Nightly releases”, a good reason to upgrade your browser. :)
    Tilt is the most awesome tool I ever worked with!

    October 26th, 2011 at 12:24

  3. Daniel

    This is simply amazing! I don’t see the use case for the accelerometer feature though but it certainly is cool :)

    October 26th, 2011 at 14:28

  4. Thomas

    I mentioned this extension to some friends, WebGL developers, and they asked why it’s a Firefox extension? Couldn’t it be just a bookmarklet and therefore compatible with Chrome, Safari and Opera?

    October 28th, 2011 at 13:29

    1. victor

      One reason would be using the drawWindow() function from a canvas 2d context to texture the visualization. See more here.

      October 31st, 2011 at 08:01

  5. adiblol

    Fla$h video on Mozilla blog? WTF?

    October 28th, 2011 at 13:52

    1. victor

      You can activate the HTML5 version of youtube:

      October 31st, 2011 at 08:02

  6. Ollie

    I’d love to see this used to reveal positioned element z-index. Feasible?

    December 2nd, 2011 at 17:42

  7. justin storms

    haching in too the coputer is against the lawww

    December 16th, 2011 at 16:08

  8. YES

    this is beyond incredible. the revolution will be in three dimensions!

    January 27th, 2012 at 02:12

  9. gyurci

    I think it is for fools.

    February 15th, 2012 at 07:25

  10. Mike

    howto see the minidom? and where on Mac OS X is the “option” menu for tilt? Thanks for any pointers


    April 17th, 2012 at 04:59

  11. ashish

    these add ons are really very cool by these developing of web pages became esay.

    August 14th, 2012 at 23:13

Comments are closed for this article.