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 with just one click.
You can familiarize yourself with your codebase structure with graph trees.
- : Visuallice the DOM hierarchies
- : Visuallice the file's relationships

Key Features:

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

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

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

Get Started!

NextExcalidraw: Tutorial

Last updated 10 months ago

Welcome to Agua!

What is Agua?

What can you do?

Key Features:

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

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

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

Get Started!

What is Agua?

What can you do?

Key Features:

1.

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

2.

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

3.

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

Get Started!

1.

2.

3.