# Tree view

{% embed url="<https://www.youtube.com/watch?v=in0W-ZEenoY>" %}

To open the Tree View click the "Tree View" icon

![](https://735981865-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2FFLWLZBR1hG0vEZPRfree%2Fimage.png?alt=media\&token=7d9c7e9e-90a1-45b1-920b-b80f4c7e52a4)

This icon will open or close a right-side panel where you can see all of the layers that make up your design.&#x20;

<figure><img src="https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2F4QEkMVE7gC1iupCsXGgv%2Fimage.png?alt=media&#x26;token=b43d7222-9603-416d-8632-30a44a44bfd0" alt=""><figcaption></figcaption></figure>

When you add an element to the page, it will also appear in our tree-view. You can add elements to the page both from the "Working area" (Canvas Area) and also from the tree view( from the blue plus icon that will appear on hover)

<figure><img src="https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2FOO5wlaiwNHpP580UN97A%2Fimage.png?alt=media&#x26;token=b63ac2d3-135f-4942-bfb6-ef9f3f8ded81" alt=""><figcaption></figcaption></figure>

The tree view panel allows you to quickly view your entire page structure in various views. The tree view panel has 3 views that allow you to view the content:

1. **Tree view** - classic tree view interface where you can see the page structure

<figure><img src="https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2FG0auABv4E8YF2FiBbwuD%2Fimage.png?alt=media&#x26;token=116545ee-a55d-4e10-9fde-45c84e990f85" alt=""><figcaption></figcaption></figure>

2\. **Section view** - view all your sections as images. When you open the panel, images of your sections will be created

<figure><img src="https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2FZeU5wv3t3G1UMTtan3pw%2Fimage.png?alt=media&#x26;token=bcd2aead-fc2d-4f67-99d6-9c76b98671b1" alt=""><figcaption></figcaption></figure>

3\. **Wireframe view** - view the page elements as they are presented on the page

<figure><img src="https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2FFS2rWdDYM4yNptK4FtXg%2Fimage.png?alt=media&#x26;token=63dc0c3e-932d-4b6b-ab91-5014418a6ab0" alt=""><figcaption></figcaption></figure>
