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. Buzu

    This is a really cool tool.

    July 20th, 2011 at 08:28

  2. Jeff Hammel

    The .xpi link doesn’t auto-install for me. Plz fix

    July 20th, 2011 at 09:51

  3. Joss Crowcroft

    Holy crap, that’s cool – wonder how it’d cope with GMail? The inbox view would look like New York’s skyline

    July 20th, 2011 at 10:12

  4. Paul Rouget

    To install the XPI, download the file, then open it with Firefox or drag’n drop it on Firefox.

    July 20th, 2011 at 10:15

  5. Vitor De Mario

    It’s working through the menu, although Ctrl Shift L is bringing up Firebug. It would be nice to be able to customize the keyboard shortcut. Anyhow, great job, it looks great and very useful.

    July 20th, 2011 at 10:23

  6. Ajay

    This is awesome!

    July 20th, 2011 at 10:39

  7. Rian Ariona

    that was Cool!!
    also note, you can’t activate it by pressing Ctrl+Shift+L when you’ve firebug installed :)

    July 20th, 2011 at 10:59

  8. mattew fedak

    Wow this certainly could lead to some creative looking 3D DOM art. I wonder if people will try and build with this in mind, for example the store could layer their site elements on purpose to create a 3D model of their logo for example

    July 20th, 2011 at 11:00

    1. francois

      Totally agreed !
      I will give it a try:)

      July 20th, 2011 at 12:22

  9. Keith Barrows

    I have FF 3.6.18 installed. When I drag-n-drop the XPI onto FF it tells me it is not compatible with that version of FF.

    July 20th, 2011 at 11:07

    1. Jerrie

      I have 3.5.6 and it isn’t compatible with that version either.

      July 21st, 2011 at 04:25

  10. Galaxy

    Wow! This is awesome. Love watching websites in 3D. :) ..
    BTW, will it work on all the builds of Firefox?

    July 20th, 2011 at 11:13

  11. skylamer

    Really, nice and cool thing:)

    keep up!

    July 20th, 2011 at 11:21

  12. Ali

    This is just awesome.

    July 20th, 2011 at 11:39

  13. Michael Behan

    Very cool stuff! Keep up the great work.

    July 20th, 2011 at 11:41

  14. skilamer

    suxx — it go crashie on 2nd page I tried it on.

    July 20th, 2011 at 11:48

  15. Riley Strong

    This is actually really valuable as a developer to see how my page structure looks & make sure it’s clean!

    July 20th, 2011 at 12:02

  16. vicapow

    so cool! thanks for sharing.

    a cool feature idea would be to still allow user interaction

    July 20th, 2011 at 12:19

  17. ZukWoo

    This makes a lot of sense dude., Very good stuff. Wow.


    July 20th, 2011 at 12:20

  18. Michael Scovetta

    Wow. This is really amazing. It would be awesome if this gets extended to include more details (like Firebug) and the ability to zoom “into” nodes to get to subnodes — so zooming in/out doesn’t mean having the whole thing get closer/farther, it means peeling back layers.

    Really awesome work!


    July 20th, 2011 at 12:40

  19. Med

    Ctrl+Shift+L opens the Panorama to me.

    July 20th, 2011 at 12:45

  20. Saurabh Mukhekar

    Really Cool and rare feature from Firefox,I am loving it

    July 20th, 2011 at 13:08

  21. Andrew

    Can you write an export tool so I can import the 3d webpage into minecraft?

    July 20th, 2011 at 13:33

  22. Max

    Is there a version of the video for modern browsers? I would really like to see the <video< tag useful somewhere else than on the realease notes page of firefox and also, sometimes, be able to watch videos. I cannot force anyone on the net to provide content through the video tag, but I expected mozilla.org to be the very first to make this effort.

    Keep on with the good work, from the comments above Tilt seems to be really impressive!

    July 20th, 2011 at 14:32

    1. Paul Rouget

      Activate the HTML5 version of youtube: http://youtube.com/html5

      July 20th, 2011 at 21:43

  23. Yuriy Romadin

    Coll but useless extension :)

    July 20th, 2011 at 14:43

  24. Ken Saunders

    OMG! Wicked cool.

    @Keith Barrows
    You need a browser that supports WebGL

    Besides, you really should upgrade. :)

    July 20th, 2011 at 15:37

  25. Ken Saunders

    Meant to say compatible with 4.0 – 8.*

    July 20th, 2011 at 15:39

  26. Eric Bieller

    Wow this is awesome. I’m a chrome user and I’ll just have to face the facts that I will always have to use FF for some of my development process, especially troubleshooting ;)

    July 20th, 2011 at 15:52

  27. andrei

    It doesn’t work for me! I have FF version 5.0

    July 20th, 2011 at 16:08

  28. db48x


    If you can’t get it to work, check about:support to see if you have webgl available. A lot of people find that their graphics driver is blacklisted, because it was causing crashes. If that’s the case, simply updating it is all you need to do.

    July 20th, 2011 at 18:44

  29. Jeff

    Really Mozilla? A flash video demo? If only there were some kind of native web video format…

    July 20th, 2011 at 21:14

  30. Paul Rouget

    For those complaining about not having a HTML5 video in this post, please activate the HTML5 version of youtube: http://youtube.com/html5

    July 20th, 2011 at 21:38

  31. Wren R

    Wow this is great! Reminds me of flipping to 3D in Paper Mario.

    July 20th, 2011 at 22:49

  32. Gaurav Mishra

    OH!! Man!… worked fine.. Aaah! three DEee Dee

    July 20th, 2011 at 23:16

  33. AdamT

    OK, so where is the Tools menu??

    July 21st, 2011 at 01:13

    1. Paul Liddington

      Press the ALT key. Also mine has the short-cut CTRL+SHIFT+M.

      July 21st, 2011 at 04:12

  34. morgan

    Most Linux desktops have had a similar feature for about 6 years….

    July 21st, 2011 at 01:42

  35. Alex Hall

    This is awesome! Thanks for sharing guys

    July 21st, 2011 at 03:42

  36. Claudiu

    Glad to see this featured here! He’s been working hard on it and it’s something that stands out of the crowd. Good job!

    July 21st, 2011 at 03:49

  37. Uwe chardon

    And HTML? will bring us 3D specifications – then webdesigners are able to build 3D Tables ???

    July 21st, 2011 at 03:51

  38. Koldkaffe

    Doesn’t work in my FF 5 either, I think I need to update the graphics driver, so, why is it DELL hasn’t updated it since 2007? WOW is my computer that old LOL

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

    July 21st, 2011 at 03:58

  39. Murali Kumar

    To enable it with firebug, Customize firebug shortcut from ctrl+shift+l to something else.

    July 21st, 2011 at 04:01

  40. Unus

    Neat. but how useful is it?

    July 21st, 2011 at 04:15

  41. Chichi

    Its working great on FF5, but defaults to Ctrl+Shift+M since my firebug uses Ctrl+Shift+L……. very nifty tool

    July 21st, 2011 at 04:19

  42. RobIII

    @morgan: And how exactly does a “3d desktop” compare to a 3d visualization of a DOM tree? Other than that they’re both 3rd they have nothing in common. Let alone the fact that this is about a browserextension/plugin and not a desktop fancyfier.

    July 21st, 2011 at 04:31

  43. Martin Dubé

    Wow! Now it will be much more easy to explain my job to my kids… “Look I’m building a page just like you do with your LEGO”.

    You should have named this extension “LEGO DOM”.

    July 21st, 2011 at 04:52

  44. Vanessa Tibika

    It’s a very interesting way to look at pages.
    Suggestion for new feature: it’d be cool to be able to reverse the direction of the interpretation, so that higher priority objects and copy are highest.
    To generate a “SEO” view of your page for instance = which objects are seen first.

    Nice job, will watch out for the next versions!

    July 21st, 2011 at 05:16

  45. Charbel

    “Could not Initialize the WebGL Context, your hardware or drivers may not support it”…

    Lol, i’m running an i7 machine with 1gb of dedicated memory.. Drivers up to date. can any one help out?

    July 21st, 2011 at 05:20

  46. Daniel S

    Doesnt work. FF 4 / Win7 x64.

    July 21st, 2011 at 05:26

  47. moo

    Great idea!

    After I first installed the extension (by dragging the link onto the addons pane), it did nothing and was visible but inaccessible in the addons pane. It didn’t ask to restart Firefox, but after restarting Firefox it worked.

    The shortcut seems to be Ctrl-Shift-M now.

    The “help” or “exit” links do nothing for me. Doubleclick works sometimes, but often it has the side effect of rotating the page, or the DOM for the wrong element is shown. Why is it doubleclick anyway if single left click isn’t taken? I would love it if I could just click on an element and have it highlighted in Firebug.

    July 21st, 2011 at 06:19

  48. Eelke

    So cool to see this tool alive, in the field. I have had exactly the same idea in my head and actually did my Msc thesis on the subject. I didn’t have the time to develop my idea any further out of the conceptual stage I left it at in December, 2010. So, I am really excited to see that somebody actually did do it! It offers so many possibilities to web developers, I’ll be following this project with great interest!

    If you’d like to check my thesis for some thoughts on the subject, check it out here: http://bit.ly/domscape. A video of my thesis concept here: http://vimeo.com/18895373

    Best regards,
    Eelke Boezeman

    July 21st, 2011 at 06:25

  49. Jack

    crash on IME(Input Method Editor)Ctrl+Space

    July 21st, 2011 at 07:08

  50. Charbel

    For anyone having trouble with webGL just go to about:config and look for webgl, and turn it to true.

    July 21st, 2011 at 07:47

  51. 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

  52. Kim

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

    July 21st, 2011 at 11:01

  53. ernest


    July 21st, 2011 at 11:12

  54. Darryn

    You guys are amazing!

    July 21st, 2011 at 13:56

  55. Stephanie Daugherty

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

    July 21st, 2011 at 21:29

  56. Vasileios Topouz

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

    July 22nd, 2011 at 02:59

  57. Norbert Vieten

    Thanks a million for such a great extension.

    July 22nd, 2011 at 06:18

  58. 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

  59. 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

  60. 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

  61. 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

  62. Ajay


    July 26th, 2011 at 04:46

  63. 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

  64. 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

  65. 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

  66. Mudit Jain

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

    July 27th, 2011 at 18:56

  67. witek

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

    July 30th, 2011 at 07:16

  68. Ayush Gupta

    Wow! This works nicely Thanks man

    July 31st, 2011 at 04:06

  69. J.S.Webschmiede

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

    July 31st, 2011 at 10:24

  70. SteveM

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

    July 31st, 2011 at 19:04

  71. 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

  72. 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

  73. 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

  74. 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

  75. SteF

    Mega Wow !!! Thanks, great work :)

    August 2nd, 2011 at 07:11

  76. 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

  77. Alexey Zinoviev


    August 10th, 2011 at 23:44

  78. Chico Web Design

    Such a unique 3D functionality in Firefox!

    August 31st, 2011 at 16:57

  79. 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

  80. evan

    This could be interesting…

    October 2nd, 2011 at 04:36

  81. Niall Flynn

    Very cool!! Good Work

    October 21st, 2011 at 08:18

  82. Albert

    Awesome, this is extremely cool.

    October 28th, 2011 at 22:33

  83. Wojtek

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

    November 2nd, 2011 at 12:19

  84. Prova

    Umm, why?

    November 4th, 2011 at 08:16

  85. 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

  86. Siddharth Saxena

    Nice one!
    Mozilla always rocks

    November 14th, 2011 at 10:21

  87. 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

  88. 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

  89. kathrin

    very interesting, great work

    January 8th, 2012 at 13:39

  90. 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

  91. 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

  92. simone medri


    March 14th, 2012 at 08:02

  93. 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

  94. 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

  95. Jamie

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

    April 29th, 2012 at 19:24

  96. SEO Biella

    Very very cool idea!!!!!!

    November 29th, 2012 at 18:22

  97. Agung Wiseso

    Worked Fine.

    February 8th, 2013 at 01:33

  98. chris

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

    April 8th, 2013 at 19:04

Comments are closed for this article.