Live HTML5 Parser

2008-08-14T16:43:36Z

Henri Sivonen: So without further ado, here’s Live DOM Viewer with an HTML5 parser running as JavaScript in your browser.

Wow! Try:

<svg><path d=M0,0h100v100

I’m impressed by the speed. I can definitely see myself tweaking, if not outright developing, the SVG images I create using this. For example, try the following:

<svg>
  <g transform=scale(1.5)>
  <image xlink:href=http://www.whatwg.org/images/logo width=100 height="100"/>
  <g opacity=0.5>

  <path d="M38,38c0-12,24-15,23-2c0,9-16,13-16,23v7h11v-4c0-9,17-12,17-27c-2-22-45-22-45,3zM45,70h11v11h-11z" fill="#F00"/>
  <circle cx="50" cy="50" r="45" fill="none" stroke="#F00" stroke-width="10"/>
</svg>

Note the quotes around the height attribute on the third line. By the (still commented out) HTML5 SVG parsing rules, either they (or a space) are required here.

I can also see this being used in a comments live preview function. A user can type in free-form markup, see the results, and when they click submit, what is sent to the server is a serialized DOM.