Preview
Click an element to select it Esc
Attributes appear inside their element as name="value". Hover over a node to see its type.
The line breaks and indentation you use to keep your HTML tidy also end up in the DOM: they become text nodes
that only contain whitespace (↵ line break, · space, → tab).
That is why childNodes returns more nodes than children, which only includes elements. They almost
never change what you see, so they are hidden by default.
Right-click a node (or press the menu key) to add children, duplicate, move or delete it. Drag nodes to move them,
Alt+↑/↓ reorders them and Delete removes them. Edit attributes and text in the
details panel below.
Edits change the live DOM, not your code: run again to start over.