Welcome to Agua!

Understand and start working on a new React Project in less than 5 minutes.

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 with just one click.

• You can familiarize yourself with your codebase structure with graph trees.

  • Component Graph: Visuallice the DOM hierarchies

  • Dependencies Graph: Visuallice the file's relationships

What can you do?

https://youtu.be/PVOiL4rWKt0?si=mnU_ZMhC21sNV9SU

Key Features:

---

1. UI Picker

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

UI Picker

2. Components Graph

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).

Components tree

3. Dependencies Graph

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

Dependencies Tree

Get Started!

---

Follow our Quick Start tutorial and understand the codebase of Excalidraw in just 5 minutes.