Understanding the interface is the first step in using epanet-js efficiently. The application consists of four main sections:
Toolbar
Map
Panels
Status bar
The toolbar is your main control center, providing quick access to project management (New, Open, Save), editing (Undo, Redo), map tools for adding network elements, simulation controls, as well as sidebar toggling. For a full breakdown of each button and its function, please see the detailed guide.
The map is the interactive canvas where you'll build, modify, and visualize your water distribution network. You can pan and zoom using standard controls, and selecting an asset on the map will display its properties in the side panel for editing.
The right sidebar give you access to two tabs: asset details and map visualization settings. The Asset tab is used for viewing and editing the properties of selected network elements, while the Map tab is used to apply visual overlays of your simulation results and change the basemap.
The left sidebar holds the Network review tools (Orphan assets, Proximity check, Crossing pipes, and Connectivity trace). It’s currently under early access, which means that you’ll need to be signed in to get access to these tools.
The status bar at the bottom provides at-a-glance information about your project's configuration (like units and auto-length settings) and the current state of your simulation (e.g., "Run successfully" or "Simulation outdated"). A detailed explanation of each indicator is available in our guide.