Ask toddle AI

๐Ÿ 

Docs home

๐Ÿ‘ถ

Getting started

๐ŸŽ“

1st week in toddle

๐Ÿ› ๏ธ

The editor

๐Ÿงฑ

Elements

๐Ÿ’…

Styling and layout

๐Ÿ“ฆ๏ธ

Components

๐Ÿ“„

Pages and navigation

โ˜๏ธ

Working with APIs

๐Ÿงฎ

Formulas

๐Ÿ””

Events and actions

๐Ÿ“ฆ

Packages

๐Ÿค–

Custom code

๐Ÿ‘ฏโ€โ™‚๏ธ

Integrations

๐Ÿฟ

Tutorials

๐Ÿงฐ

Other

The element tree

The element tree lets you view all the elements in the page or component you are editing. Just like with the canvas you can select elements by clicking on them.

Right clicking an element in the tree will open a context menu that lets you perform several different actions such as:

  • Add a new child element
    Setting a formula for toggling or repeating the element (Read more in the Formula section)
  • Deleting the element
  • Extracting the element and its decendants as a new component ( Read more under Components)
You can drag any element to reorder the element tree.
โ Holding
ALT while dropping a dragged element will copy it instead of moving.

You can add elements to your page or component by selecting "Add element" from the context menu or by clicking the button in the bottom of the panel.

This opens the element catalog where you can browse different types of elements.

โ Use the hotkey e to quickly open the element catalogue