Visualize Your Markup with Processing

December 20, 2008 at 11:26 pm · Filed under HTML/CSS, Web

I recently discovered an interesting applet developed by Aharef in 2006 that uses the Processing programming language to graph the element tree of a given web page.

For instance the current markup on this site gets rendered like this:

An HTML DOM Visualizer Applet
Graph of http://blog.paulgueller.com

According to the documentation and examples, the colors represent:

  • blue: links (the A tag)
  • red: tables (TABLE, TR and TD tags)
  • green: DIV tags
  • violet:  images (the IMG tag)
  • yellow: forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
  • orange: linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
  • black: the HTML tag, the root node
  • gray: all other tags

Processing is an open-source programming language and development environment used for prototyping and producing images, animation, and interactions within a visual context. The code-graphing applet requires Java, but processing.js has made the language more widely accessible and available for experimentation.

Leave a Comment