Documentation
Developer Tool
Low-codeDeveloper Tool
Developer Tool
Low-codeDeveloper Tool
  • Welcome to Agua!
  • Quick Start
    • Excalidraw: Tutorial
    • Talk to our founders
    • FAQ
  • Basics
    • UI Picker
    • Components Graph
    • Dependencies Graph
  • Help
    • Mail Support
    • WhatsApp Support
  • Community
    • Discord
    • WhatsApp
  • Legal
    • Privacy Policy
    • Terms and Conditions
Powered by GitBook
On this page
  • Basic Setup
  • 1. Codebase setup​
  • 2. Agua setup​
  • Platform Tour​
  • A. UI Quick Access
  • A. Components Tree
  • B. Dependencies Tree
  • D. Integrated IDE
  1. Quick Start

Excalidraw: Tutorial

PreviousWelcome to Agua!NextFAQ

Last updated 10 months ago

In this tutorial, we'll walk through Excalidraw's codebase's components and dependency structure.

Basic Setup

Retrieve all necessary assets from Excalidraw's GitHub and start using Agua.

1. Codebase setup​

Fork and clone the GitHub repository locally:

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

2. Agua setup​

2.1 Sign Up

Open Agua's web editor:

Register with your Google Account. 

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

Agua is currently only supported in Google Chrome.

2.2. Terminal installation​

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

npx --yes agua-server

Agua is currently only supported in Node.js 18.

2.3. Welcome to Agua

Platform Tour​

A. UI Quick Access

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

A. Components Tree

Visualize component hierarchies and locate Sentry's files.

B. Dependencies Tree

Visualize component dependencies.

D. Integrated IDE

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