Working with the component tree

	1. Open the component tree from the Pages menu. The components are shown in the order in which they are nested for the selected page. The example page shown here contains, for example, a Row in which a Column is nested.  2. Access the menu for a single component by clicking ... on the chosen component (2). From the dropdown, you can swiftly rename, duplicate, or remove a component from a page.
	3. You can navigate between the page components by hovering over the items in the component tree.  Double-click (or pressing Options in the dropdown) will open a single component's options in the builder.
	4. Other buttons include:    Collapsing a component Setting the visibility of a component

Top bar

By default, the top bar of your component tree contains three buttons:

	- and + buttons allow you to zoom in and out in your component tree. You can zoom in to a maximum of 150% and zoom out to 50%.
	Switch the position of your component tree from left to right using this button.

As you switch the position of the component tree to the right of the canvas, you get one. extra button:

You can hide your component tree using this button. This grants you more visibility on your page canvas.

In the examples above, the component tree is displayed on the left side of the page. By clicking the right-arrow button located at the top right of the component tree, you can shift it to the opposite side of your page.

Now, both the component tree and the options for the selected component in the tree or canvas are simultaneously open! This configuration persists even when navigating between pages.

Keybinds

The component tree provides several useful features you might not be aware of, including keybindings that can be used on the canvas. For example, pressing the up arrow key will navigate to the component above the currently selected one. Likewise, pressing the Delete key (or Backspace on Mac) will delete the selected component once you confirm the action.