# 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**](https://agua.gitbook.io/docs/basics/ui-picker) 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](https://agua.gitbook.io/docs/basics/ui-picker)

#### 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](https://agua.gitbook.io/docs/basics/components-tree)

#### 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](https://agua.gitbook.io/docs/basics/dependencies-tree)

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

## Get Started!

***

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://agua.gitbook.io/docs/readme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.