Element Tree


The element tree shows the hierarchy of elements of the user interface. Elements can be selected or rearranged in the tree.

The top bar of the element tree consists of three widgets:

Filter Input

The filter field allows for filtering the tree's elements with a given string.

+ Button

This button allows you to expand all containers in the whole tree.

- Button

This button will contract all containers in the whole tree.


The elements in the tree may be rearranged via drag and drop. During the drag operation, the cursor will indicate if it is possible to drop the selected elements or not. The validation is based on HTML structure definitions so that it is not possible for example to drag an input field outside a form.

To select multiple elements in the tree, hold down either the cmd-key on Mac OS X or the ctrl-key on Windows and click on the elements to either select or deselect it.



Copyright 2013 by Georg Heeg eK, released under MIT License