Tilt: Visualize your Web page in 3D

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.

Tilt is a fun new Firefox extension focused on creating a 3D visualization of a webpage.

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.

Unlike other developer tools or inspectors, Tilt allows for instant analysis of the relationship between various parts of a webpage in a graphical way, but also making it easy for someone to see obscured or out-of-page elements. Moreover, besides the 3D stacks, various information is available on request, regarding each node’s type, id, class, or other attributes if available, providing a way to inspect (and edit) the inner HTML and other properties.

Based on WebGL

The visualization is drawn using WebGL, for dynamic, fast, in-browser rendering. At initialization, Tilt creates individual 3D objects (structures describing how the webpage geometry looks like) using the DOM, with the BODY as the lowest layer and the base of the document upon which descendant nodes are layered. For each successive level, another platform is built, adding depth to the 3D webpage mesh. For example, stacks are built from DIVs, ULs, or any containing node with children.


Controlling the visualization is achieved using a virtual trackball (arcball), which rotates around the X and Y axes. Other mouse events exist to control yaw, pitch, roll, pan, zoom, as well as various additional keyboard shortcuts. The controller is not tied to these peripherals only however, making it accessible and easily scalable for other input methods or devices. Double clicking a node brings up the Ace Cloud9 IDE editor, showing more useful information about the node and the inner HTML.

Try it

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

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.


More features are soon to be added, some of which include: modifying and updating the 3D webpage mesh on the fly (as the webpage changes, exposing CSS transforms for each node, plus customizing stack spacing, thickness, transparency etc.), rendering elements with absolute position or floats differently (e.g., hovering above the webpage based on their z-index), creating a more developer-friendly environment and better integration with the Ace editor and the Firefox Developer Tools. (highlighting the currently selected node, instant 3D preview), exporting the visualization to other browsers or applications (as a 3D object file, probably .obj and/or COLLADA).

The greatest milestone will be achieving seamless 3D navigation between webpages, as in a normal 2D environment.

For more information about upcoming tasks visit the TODO.md list.

About Paul Rouget

Paul is a Firefox developer.

More articles by Paul Rouget…


  1. darwin

    not work in my firefox :(
    “Could not initialize the WebGL context,
    your hardware or drivers may not support it.”

    Firefox5, xp

    July 21st, 2011 at 08:42
  2. Kim

    FEED ME! THAT’S AWESOME!! Works like a charm :)

    July 21st, 2011 at 11:01
  3. ernest


    July 21st, 2011 at 11:12
  4. Darryn

    You guys are amazing!

    July 21st, 2011 at 13:56
  5. Stephanie Daugherty

    Uses the same key as recallmonkey, otherwise, neat tool :)

    July 21st, 2011 at 21:29
  6. Vasileios Topouz

    Fantastic, let’s see how it will evolve ;>

    July 22nd, 2011 at 02:59
  7. Norbert Vieten

    Thanks a million for such a great extension.

    July 22nd, 2011 at 06:18
  8. Blakeyg

    I had a lot of trouble getting it to work in Firefox 5.

    If you’re getting the error message “Could not initialize the WebGL context, your hardware or drivers may not support it.”, try the following.

    * Make sure your graphics card supports Open GL (all but ancient ones should)
    * Make sure your graphics card drivers are up-to-date
    * Make sure you are running a Web-GL compatible browser (e.g. Firefox 4+)

    I double-checked the Web GL settings in Firefox, and although it was enabled I had to enable forced mode to get WebGL to work. To do this:

    1. In Firefox’s URL bar, type “about:config” and press Enter.
    2. Click the “I’ll be careful, I promise!” button.
    3. Do a search for “webgl” in the Filter field.
    4. Check that “webgl.disabled” is set to False.
    5. Double-click “webgl.force-enabled” to set it to True.

    Now try running the addon again.

    Hope this helps some people, as Tilt is a brilliant tool!

    July 22nd, 2011 at 08:28
    1. Ricardo

      Thanks for these steps, they worked perfectly for me :)

      August 2nd, 2011 at 08:50
    2. MZ

      Thanks, nice tip

      August 9th, 2011 at 19:12
  9. Apoleon

    On a Mac (Snow Leopard) and FX 5.0.1 all I get is a black window. My machine is not that old (early 2008 Mac Pro).

    July 24th, 2011 at 06:59
  10. Michael

    I’ve always wanted this to debug z-index issues. I use a bookmarklet now to help with this. See http://www.erichynds.com/jquery/visualizing-your-z-index-stacks-with-jquery/#bookmarklet for the bookmarklet that can be used in any browser.

    July 24th, 2011 at 19:06
  11. SJ

    Is this only for FF 4.n? Is there any way I can try it on FF 3.6?

    July 26th, 2011 at 04:07
    1. louisremi

      It’s for Firefox 4 only. It’s another good reason to update your browser ;-)

      July 26th, 2011 at 09:46
  12. Ajay


    July 26th, 2011 at 04:46
  13. Niklas

    Very similar application to http://hertzen.com/experiments/html2webgl/ which uses on the browser without extensions, by reading the contents of the page through the DOM instead of drawWindow

    July 26th, 2011 at 15:26
  14. Chak

    Its not working in my Firefox 6.0 beta

    “Could not initialize the WebGL context,
    your hardware or drivers may not support it.”

    i tried:

    “webgl.disabled” is set to False.
    “webgl.force-enabled” to set it to True.
    updated Graphics driver.

    July 27th, 2011 at 02:24
  15. Claudiu

    Guys, the feedback on what’s not working wouldn’t help the developer if it’s sent here. I’m sure raising an issue on GitHub would be more appropiate…

    July 27th, 2011 at 03:43
  16. Mudit Jain

    You guys are just awesome… @Paul its truly awesome…. :-)

    July 27th, 2011 at 18:56
  17. witek

    Nice and usefull. Can you make it work in other webgl enabled webbrowsers?

    July 30th, 2011 at 07:16
  18. Ayush Gupta

    Wow! This works nicely Thanks man

    July 31st, 2011 at 04:06
  19. J.S.Webschmiede

    that is really a nice extension. I will definitely try.

    July 31st, 2011 at 10:24
  20. SteveM

    Wow! I was looking for something like this months ago, and now one finally exists! brillient! :)

    July 31st, 2011 at 19:04
  21. Jubayer Arefin

    It is marvelous. Now I can debug in 3D ! Warm thanks to the devs and good luck.

    July 31st, 2011 at 23:42
  22. pw

    Would be great if this could be made available on the Web Developer Toolbar.

    August 1st, 2011 at 06:50
    1. Thug

      It is.

      October 21st, 2011 at 03:26
  23. Enrico

    WooHooo Works like a charm!
    Firefox 5.0.1 / MBP 2010 i7 / 10.7
    Thanks you guys! Great tool!

    August 2nd, 2011 at 05:46
  24. neil

    not only insanely useful but real fun to use – very impressive can’t wait to see how it evolves

    August 2nd, 2011 at 06:11
  25. SteF

    Mega Wow !!! Thanks, great work :)

    August 2nd, 2011 at 07:11
  26. Kevin Harter

    This helped me solve a problem, in an inherited web project, in about six minutes that I’ve been working on for three days. Awesome tool!

    Now where’s the Chrome version? =)

    August 3rd, 2011 at 08:22
    1. Eric

      Yes, totally! I so want the Google Chrome version of this addon! Please notify when it comes out!!

      February 5th, 2012 at 16:05
  27. Alexey Zinoviev


    August 10th, 2011 at 23:44
  28. Chico Web Design

    Such a unique 3D functionality in Firefox!

    August 31st, 2011 at 16:57
  29. paris triathlon

    Can someone confirm that ‘s working on firefox 7 on mac ?
    I can’t find firefox 4 for mac on the web, even on mozilla web site :(((

    September 29th, 2011 at 09:23
    1. paris triathlon

      Finally i found the ftp link ,
      you can download all the firefox version here :


      including the mac versions ;)

      October 3rd, 2011 at 01:54
  30. evan

    This could be interesting…

    October 2nd, 2011 at 04:36
  31. Niall Flynn

    Very cool!! Good Work

    October 21st, 2011 at 08:18
  32. Albert

    Awesome, this is extremely cool.

    October 28th, 2011 at 22:33
  33. Wojtek

    This is coolest developer visualization tool I have ever seen on web!

    November 2nd, 2011 at 12:19
  34. Prova

    Umm, why?

    November 4th, 2011 at 08:16
  35. Bosi

    It works just fine in Firefox 8.0…BTW I do not understand why ppl are still running versions 4 or 5 or however old releases of Firefox – is there any reasonable explanation not to upgrade your browser to the latest release?

    November 10th, 2011 at 12:05
  36. Siddharth Saxena

    Nice one!
    Mozilla always rocks

    November 14th, 2011 at 10:21
  37. techglimpse

    Its looks great to visualize in 3D?…but just wondering how can it be helpful to the developer…probably it helps to visualize the z-index of an html element…?…not sure…

    November 29th, 2011 at 03:12
  38. Dan

    Unfortunately CTRL+SHIFT+L is the same shortcut as firebug another essential tool for developers.

    Integrate it into Firebug (Similar to YSlow) or pick a new shortcut key combination.

    December 6th, 2011 at 10:21
  39. kathrin

    very interesting, great work

    January 8th, 2012 at 13:39
  40. Lee Jordan

    I can see a potential here of making real 3D webpages viewable on the iPhone using a “Hasbro My3D”!

    January 14th, 2012 at 10:56
  41. Guilherme Monteiro

    Hello folks, could someone help me to solve my issue? When I try to use the TILT 3D the follow message is shown: “Hmm. While your browser seems to support WebGL, it is disabled or unavailable. If possible, please ensure that you are running the latest drivers for your video card.”

    My hardware and the browser are all right. The problem seems to be some incompatibility between webGL and my Intel HD Integrated.

    I’ve tried all possibilities but I am still under the weather, does someone has any clue?

    I really wanna use this add because I am learning html and it’s very usefull to see how the tags works.


    January 27th, 2012 at 22:01
  42. simone medri


    March 14th, 2012 at 08:02
  43. Todor

    Wonderfull ! Just found about it and I’m impressed. I wonder if is possible to exploit this further and present a web site in 3d, specially designed with some elements bumping from others

    March 16th, 2012 at 07:34
  44. Francisco

    Just tried it in my ff 12 in ubuntu and it is astonishing! Best thing I realized it existed till yesterday xD

    March 30th, 2012 at 23:05
  45. Jamie

    This is great but what happens when people start setting z-index:999999?

    April 29th, 2012 at 19:24
  46. SEO Biella

    Very very cool idea!!!!!!

    November 29th, 2012 at 18:22
  47. Agung Wiseso

    Worked Fine.

    February 8th, 2013 at 01:33
  48. chris

    nice one …..great visualisation of webpage really usefull :)

    April 8th, 2013 at 19:04

Comments are closed for this article.