> 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/readme.md).

# Welcome to Agua!

## What is Agua?

***

Agua is a **React Visual Environment**. If you hate working with large codebases and poor documentation, this is for you. You can use Agua to understand a React project faster. We also provide you with the best coding for any given task. **We want you to spend less time figuring out new code so you spend more time building amazing things.**

> Agua is **free** for developers!

## What can you do?

If you are new to a React project:

* You can [**select each element of your UI element and access its file**](/docs/basics/ui-picker.md) with just one click.
* You can **familiarize yourself with your codebase structure** with graph trees.
  * [**Component Graph**](#dependencies-tree): Visuallice the DOM hierarchies
  * [**Dependencies Graph**](#dependencies-tree): Visuallice the file's relationships 

{% tabs %}
{% tab title="What can you do?" %}
{% embed url="<https://youtu.be/PVOiL4rWKt0?si=mnU_ZMhC21sNV9SU>" %}
<https://youtu.be/PVOiL4rWKt0?si=mnU_ZMhC21sNV9SU>
{% endembed %}
{% endtab %}
{% endtabs %}

## Key Features:

***

### 1. [UI Picker](/docs/basics/ui-picker.md)

#### Click an element of your project's UI and access automatically its file in VS Code.

{% tabs %}
{% tab title="UI Picker" %}
{% embed url="<https://youtu.be/kAv-8AJxphk>" fullWidth="true" %}
{% endtab %}
{% endtabs %}

### 2. [Components Graph](/docs/basics/components-tree.md)

#### Visualize the DOM hierarchies. See the structure of all the components within your project. Access a component file path, its Parent element (reference), and the component Child elements (dependencies).

{% tabs %}
{% tab title="Components tree" %}
{% embed url="<https://youtu.be/kAv-8AJxphk>" fullWidth="true" %}
{% endtab %}
{% endtabs %}

### 3. [Dependencies Graph](/docs/basics/dependencies-tree.md)

#### Visualize the file's relationships. See the structure of all files within your project. Access a dependencies file path, its reference, and its dependencies.

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

<figure><img src="/files/pxRKgAPCVsybZ4pjFBWN" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Get Started!

***

Follow our [Quick Start tutorial](/docs/quick-start/excalidraw-tutorial.md) and understand the codebase of [Excalidraw](https://excalidraw.com/) in just 5 minutes.