Working with elements

Elements make up the interface of your page or component.

Some elements can have children , and all elements will have a parent . In the picture below the button element is a child of the header, and the header is a parent of the button.

The text element with the word "Refresh" is a child of the button element and a descendant of the header element. Similarly the header element is said to be an ancestor of the text element

To add a new element, open the element catalog by clicking "Add element" in the bottom of the element tree. Or using the hotkey e

The element catalog lets you browse different types of elements and insert them into your app. The new element will be inserted as the last child of the currently selected element. If no element is selected it will be inserted as a child of the root elements.

☝️ Text elements cannot have children and there are several HTML elements that cannot have children either.

There are 3 different types for elements you can add to your page or component in toddle