How to manage components in the Component Tree

In this tutorial, you’ll learn all about using the Object tree within the Page Builder.

Jip Volkers

Published: 16-09-2020

Last updated: 16-09-2020

Video Thumbnail


In this tutorial, we’ll explore the functionalities of the Object tree within the Page Builder. The Object tree is a fast and simple way to see all the components that are used on your Page Builder page. 


Before we can start using the Object tree, we’ll first have to create or use an already existing page within your application. Open the Page Builder page and add some components to it by dragging and dropping them onto the canvas.

Object tree overview

Now that we have a page with some components present, we can start using the component tree functionalities.

The Component tree will display all the components present on your page, you can see which component is part of another component. 

Clicking a component within the object tree will select it. This selection can be seen in both the object tree and the preview of your Page Builder page. 

In order to open the options of your component you’ll just have to click the component, in your object tree, twice. 

Within the settings tab you’ll be able to rename your component or partial. Changing the name of your component or partial will only change it within the instance.

Changing a component or partials name changes it within the object tree. The renaming of the component is reflected in the object tree. This is really helpful when your application grows and more and more components are present on your page to keep an overview.

If you would like to know more about partials, feel free to check out our article.

If you want to change the location of one of your components, you’ll be able to drag and drop it onto the desired destination.

In this tutorial

Not sure where to start?

Click here to register and start learning