Elemental HTML editor Launch

Elemental is a prototype HTML/DOM tree editor that treats HTML as a strict structure instead of jumbled markup.

Elemental is the web inspector re-imagined as a full HTML creation tool.

Quick start: Click around to select an element and start typing an element name to create children.


Key Action Notes
Up Select previous row Alt+up to select previous sibling
Down Select next row Alt+down to select next sibling
Left Collapse node Alt+left to select parent
Right Expand node Alt+right to select child
Enter Edit selected node
a-z Start typing to create a new element
. Add/Edit a class
# Add/Edit id
Space Create new text node
! Create new comment node
Backspace/Del Remove node
Tab Indent node Ctrl+Alt+right for alternate indent behaviour
Shift+Tab Outdent node Ctrl+Alt+left for alternate outdent behaviour
Ctrl+Up Move node up one row Alt+Ctrl+Up to move above previous sibling
Ctrl+Down Move node down one row Alt+Ctrl+Down to move below next sibling

Created by

Ville Vanninen / Workflower