> For the complete documentation index, see [llms.txt](https://agua.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://agua.gitbook.io/docs/quick-start/excalidraw-tutorial.md).

# Excalidraw: Tutorial

Discover what you can do with Agua!

In this tutorial, we'll walk through [Excalidraw's](https://excalidraw.com/) codebase's components and dependency structure.

***

{% tabs %}
{% tab title="Excalidraw" %}

<figure><img src="https://2382477590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFjxEUiUrgGw7UGx40Ubm%2Fuploads%2FVPQ3y5CGYM3GXgrDNmIu%2FSentry-Reduced.png?alt=media&amp;token=fff108ae-e213-41a3-9c30-f6d95dd2411e" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Basic Setup

Retrieve all necessary assets from [Excalidraw's GitHub](https://github.com/excalidraw/excalidraw) and start using Agua.

***

### 1. Codebase setup[​](https://docs.agua.dev/installation#1-codebase-setup) <a href="#id-1-codebase-setup" id="id-1-codebase-setup"></a>

> Fork and clone the GitHub repository locally:

```
https://github.com/excalidraw/excalidraw.git
```

### 2. Agua setup[​](https://docs.agua.dev/installation#2-agua-setup) <a href="#id-2-agua-setup" id="id-2-agua-setup"></a>

#### 2.1 Sign Up

> Open Agua's [web editor](https://auth.agua.app/signin/):
>
> Register with your Google Account.&#x20;

```
https://auth.agua.app/signin/
```

{% tabs %}
{% tab title="Sign Up" %}

<figure><img src="https://2382477590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFjxEUiUrgGw7UGx40Ubm%2Fuploads%2FOyXGM5vlSk4p96oEq7zG%2FAgua-Sign-Up-Reduced.png?alt=media&amp;token=65e59733-f8da-47e3-8105-8b3021e71499" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
Agua is currently only supported in [**Google Chrome**](https://www.google.com/intl/es-419/chrome/).
{% endhint %}

#### 2.2. Terminal installation[​](https://docs.agua.dev/installation#21-terminal-installation) <a href="#id-21-terminal-installation" id="id-21-terminal-installation"></a>

> Go to the root folder of the Excalidraw repository and run:

```
npx --yes agua-server
```

{% tabs %}
{% tab title="Terminal installation" %}

<figure><img src="https://2382477590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFjxEUiUrgGw7UGx40Ubm%2Fuploads%2F6eZOJ7PPIpqtfgzX1Gv7%2FAgua-Install-Reduced.png?alt=media&amp;token=fde28a59-97de-4a64-b131-dcc3af181cbf" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
Agua is currently only supported in [**Node.js 18**](https://nodejs.org/en/download).
{% endhint %}

#### 2.3. Welcome to Agua <a href="#id-23-folder-selection" id="id-23-folder-selection"></a>

{% tabs %}
{% tab title="Welcome to Agua" %}

<figure><img src="https://2382477590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFjxEUiUrgGw7UGx40Ubm%2Fuploads%2FY9EQ16K77Op2YhwY0kK1%2FComponent-List-Reduced.png?alt=media&amp;token=3df9adda-5693-45a9-8cff-0882ae73d615" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Platform Tour[​](https://docs.agua.dev/installation#3-platform-tour) <a href="#id-3-platform-tour" id="id-3-platform-tour"></a>

***

### A. [UI Quick Access](/docs/basics/ui-picker.md)

> Click and access an element's file, component structure, and dependencies.

{% tabs %}
{% tab title="Components tree" %}

<figure><img src="https://2382477590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFjxEUiUrgGw7UGx40Ubm%2Fuploads%2F1PQyy9IxueZ2eBUFvMXh%2FComponent-Tree-Reduced.png?alt=media&amp;token=e8f86f94-2ece-4a99-9c54-294e4840623c" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### A. [Components Tree](/docs/basics/components-tree.md)

> Visualize component hierarchies and locate Sentry's files.

{% tabs %}
{% tab title="Components tree" %}

<figure><img src="https://2382477590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFjxEUiUrgGw7UGx40Ubm%2Fuploads%2F1PQyy9IxueZ2eBUFvMXh%2FComponent-Tree-Reduced.png?alt=media&amp;token=e8f86f94-2ece-4a99-9c54-294e4840623c" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### B. [Dependencies Tree](/docs/basics/dependencies-tree.md)

> Visualize component dependencies.

{% tabs %}
{% tab title="Dependencies Tree" %}

<figure><img src="https://2382477590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFjxEUiUrgGw7UGx40Ubm%2Fuploads%2FcQ2BTFYop3fM9PTSMtvc%2FDependency-Tree-Reduced.png?alt=media&amp;token=a29ac57f-670d-4861-8d93-5bad1bec0c62" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### D. [Integrated IDE](broken://pages/0kfwTGAuXfYHWyESXIel)

> Edit Sentry's code in our web-based VS Code.

{% tabs %}
{% tab title="Welcome to Agua" %}

<figure><img src="https://2382477590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFjxEUiUrgGw7UGx40Ubm%2Fuploads%2Fnj2Y0SXCU7Nf3fTAMog1%2FIntegrated-IDE-Reduced.png?alt=media&amp;token=aa38c77b-05cc-4f8b-b024-dcd190aa41bb" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}