# Toolbox

The Architect Toolbox provided a collection of essential tools to streamline your app design process. Efficiently design and organize your app using the tools available.

<figure><img src="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2F494jTAEGE2YSJxe4PQmw%2FCleanShot%202023-05-24%20at%2018.15.04.png?alt=media&#x26;token=b09e4631-1a0f-44e8-b80c-39069a4c9a1e" alt=""><figcaption><p>Architect Toolbox</p></figcaption></figure>

Here, you'll find four key tools at your disposal :&#x20;

1. Widgets Showroom: Explore and select widgets for the Widgets Explorer.
2. Pages List: Manage and navigate through app pages.
3. Components List: Reuse and manage components across the app.
4. Custom Widgets List: Manage custom widgets.

## Widgets Showroom

In the Widgets Showroom you can navigate and search through all the widgets and drag and drop them into the[explorer](https://docs.goril.app/main-pages/architect/explorer "mention")to create the desired layout and arrangement.

{% hint style="warning" %}
Actually, it is only possible to drop widgets on the Explorer. Dropping on the [application-preview](https://docs.goril.app/main-pages/architect/application-preview "mention") is not enable for now.
{% endhint %}

## Pages List

<figure><img src="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FqYfvevvQZbss0slxLyB9%2FCleanShot%202023-05-26%20at%2010.36.24%402x.png?alt=media&#x26;token=243d8561-d5ba-4918-99b7-99de0fbef0f8" alt="" width="375"><figcaption><p>Pages List</p></figcaption></figure>

In the Pages List you can navigate, create, delete and search through all the pages in your project.

To **Create** a new page click on the **Add New Page** button and fill the name of the page.

To **Delete** a page, click on the contextual menu at the right of the card of the page.

{% hint style="info" %}
To open a page in the [explorer](https://docs.goril.app/main-pages/architect/explorer "mention") click on it on the Pages List.&#x20;

The **Explorer,** **Application Preview** and **Settings Panel** will update with the clicked page's information.
{% endhint %}

## Components List

<figure><img src="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FdzF6sNz7Uamkdb63Taz3%2FCleanShot%202023-05-26%20at%2010.44.39%402x.png?alt=media&#x26;token=65e5719d-2720-44e7-a0ab-31a6429a1f28" alt="" width="375"><figcaption><p>Components List</p></figcaption></figure>

In the Components List you can navigate, create, delete and search through all the custom components in the project.

To **Create** a new component click on the **Add New Component** button and fill the informations.

To **Delete** a component, click on the contextual menu at the right of the card of the component.

{% hint style="info" %}
To open a component in the [explorer](https://docs.goril.app/main-pages/architect/explorer "mention") click on it on the Components List.&#x20;

The **Explorer,** **Application Preview** and **Settings Panel** will update with the clicked components information.
{% endhint %}

### ✨ Tips

Create a custom components to your needs and use it anywhere you want in your project !

The custom component like a classic component, drag and drop it in the [explorer](https://docs.goril.app/main-pages/architect/explorer "mention") !

## Custom Widgets List

<figure><img src="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2Fclu1axkIboqikCVuLjG9%2FCleanShot%202023-05-26%20at%2010.49.31%402x.png?alt=media&#x26;token=c38fd6b4-4de8-4da0-8f98-950760c04ca6" alt="" width="375"><figcaption><p>Custom Widgets List</p></figcaption></figure>

In the Custom Widgets List you can navigate and search through all the custom widgets in the project.&#x20;

To **Create** a custom widget, check [custom-widgets](https://docs.goril.app/main-pages/custom-code/custom-widgets "mention")

{% hint style="info" %}
The difference between Custom Component and Custom Widget is the way they are created. Custom Component are created the graphic way and and Custom Widget the code way.
{% endhint %}

### ✨ Tips

The custom component like a classic component, drag and drop it in the [explorer](https://docs.goril.app/main-pages/architect/explorer "mention") !