> For the complete documentation index, see [llms.txt](https://gstudioapp.gitbook.io/gstudio-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gstudioapp.gitbook.io/gstudio-docs/intermediario/node-tree-navigator.md).

# Node tree (Navigator)

### :thinking: O que é

![](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2F7TB9FNUXK6vRuSHZcukK%2Fnotetree.png?alt=media\&token=938e44fb-a4d9-4f3d-a1de-8c77f0b9d797)

A Node Tree é uma das principais peças que compõe o campo de editor de nossa plataforma.

É a barra lateral que fica localizada no campo esquerdo da página do editor. É a grande responsável por garantir a informação de hierarquia dos componentes que são utilizados em um projeto.

### :open\_file\_folder:Estrutura 

A sua estrutura começa com um componente padrão que é **uma página.** Neste caso a página é o item raiz e os demais componentes que são utilizados durante o projeto vão complementando a hierarquia da Node Tree.

Os componentes dentro da Node Tree podem ser classificados como pai (A) e filho (B). Neste caso os componentes pais são aqueles que abrigam dentro de si outros componentes, ou seja, os componentes filhos. 

O pai é o nó que está mais alto na hierarquia e o filho o que está mais baixo.

![](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2FPneBRlqVCLHgm9V9LPQz%2Fpai-e-filho.png?alt=media\&token=30e6354f-361c-4ed6-9976-573384af444a)

{% hint style="info" %}
É possível que um projeto tenha diversos componentes pai, assim como **alguns componentes específicos** podem agir como pai mesmo que estejam dentro de um componente pai.
{% endhint %}

### :computer:Organização

A Node Tree permite que os componentes sejam agrupados em diversos componentes pais com seus respectivos filhos. A visualização permite que um componente pode ser expandido ou recolhido.

### :page\_with\_curl:Ações na Node Tree 

Para fazer ações na Node Tree é muito simples e intuitivo:

**Para adicionar um componente:** Basta clicar na opção "+" ao lado do nome do componente que aparece dentro da Node Tree e selecionar o componente desejado

**Para excluir um componente:** Selecione o componente que deseja excluir e clique no ícone de lixeira que fica ao lado do nome do componente.

**Duplicar um componente**: Para replicar um componente selecionando a opção duplicar.

**Para criar um novo componente pai:** Clique na opção "+" no item page e um novo componente pai será criado.

###