Work 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 button's parent.

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" at the bottom of the element tree. Or use 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 of elements you can add to your page or component in toddle

• HTML elements
• Text elements
• Components