A browser-based engineering workspace for the EPA Storm Water Management Model (SWMM5), featuring in-browser WebAssembly simulation, INP editing, result visualization, report analysis, batch processing, control-rule authoring, and model-management tools.
Repository: SWMMEnablement/SWMM-Engine
Live app / Replit: replit.com/@robertdickinson/SWMM-Engine
SWMM Engine is a full-stack TypeScript web application that provides a professional browser interface to the EPA SWMM5 simulation engine. Its most distinctive capability is that the SWMM5 engine is compiled to WebAssembly and runs entirely in the browser, allowing users to upload, edit, validate, and simulate SWMM input files without relying on a server-side simulation engine for the core run workflow. [page:48]
The application is designed for information-dense engineering use. In addition to simulation itself, it includes tools for syntax-aware INP editing, interactive network maps, binary .OUT result parsing, time-series charts, longitudinal profiles, run comparison, .RPT forensics, SWMM4 conversion, section-aware INP diffs, filebase integration, batch execution, and AI-assisted model review. [page:48]
The repo is best understood as a SWMM workbench, not just a single simulator page. The main simulator sits at the center, but the surrounding tools turn the app into a broader analysis and model-governance environment for SWMM practitioners. [page:48]
The replit.md documentation explicitly describes it as a “web-based interface for the EPA Storm Water Management Model simulation engine” with client-side WASM execution and a React/Express architecture for professional engineering workflows. [page:48]
The app runs the SWMM5 engine compiled to WebAssembly from client/public/wasm/swmm5.js, with browser-based file handling through the Emscripten FS API. Simulation initialization happens automatically on page load, and the status badge reports whether the engine is loading, available, or unavailable. [page:48]
The main simulator supports loading SWMM .inp files, editing them directly in the browser, and viewing syntax-highlighted sections, comments, keywords, and numeric values. The app also includes auto-fix helpers for common issues such as missing REPORT options, zero-length conduits, and missing cross-sections. [page:48]
Simulation outputs can be explored through:
- interactive network maps, [page:48]
- time series plots, [page:48]
- profile plots along selected paths, [page:48]
- downloadable binary
.OUTand.RPTartifacts, [page:48] - and one-click CSV exports from node, link, and subcatchment result tabs. [page:48]
The workspace also includes:
- RPT Detective for forensic report-file analysis, [page:48]
- SWMM4 Legacy converter for
.DATto.INP, [page:48] - INP Diff for section-aware file comparison, [page:48]
- File Manager integration with an external SWMM Filebase tool, [page:48]
- Batch SWMM for running multiple models, [page:48]
- and Camel SWMM for AI-assisted model review and management. [page:48]
The documented routes in replit.md define a substantial multi-tool application rather than a single screen. [page:48]
The main simulator page is the central workspace. It supports INP file loading and editing, syntax highlighting, simulation execution, interactive result tabs, downloadable outputs, companion-resource links, keyboard shortcuts, and shareable URLs. [page:48]
Notable simulator capabilities include:
- Network Map tab with SVG pan/zoom, result-based coloring, tooltips, and animated playback from binary
.OUTdata, [page:48] - Time Series tab with interactive Recharts plots for nodes, links, and subcatchments, [page:48]
- Profile Plot tab for longitudinal hydraulic visualization, [page:48]
- Run Comparison tab with baseline storage in localStorage, [page:48]
- Model Statistics Dashboard showing pipe-length histograms, subcatchment-area breakdowns, and connectivity metrics, [page:48]
- Control Rule Editor tab for SWMM
[CONTROLS]authoring with templates, validation, import/export, and direct “Apply to INP” integration. [page:48]
The simulator also ships with 8+ example models, including tutorial, LID/green infrastructure, water-quality, force-main, dual-drainage, and Greenville SI examples. [page:48]
RPT Detective is a dedicated SWMM report-file analyzer that computes an instability index, health score, “drama level,” root-cause analysis, and detailed flooding/surcharge/conduit tables. [page:48]
Its newer sub-tools include:
- Section Explorer for browsing 57+ parsed report section types, [page:48]
- Statistics for per-column descriptive statistics and visual distribution bars, [page:48]
- Compare Scenarios for side-by-side deltas between two
.RPTfiles, [page:48] - Export for section CSVs, structured JSON, and raw
.RPTdownload. [page:48]
This page converts legacy SWMM4 .DAT files into modern SWMM5 .INP format. [page:48]
A section-aware diff tool for comparing two SWMM5 .inp files. It includes an LCS-based line diff, grouped section sidebar, stat badges, filters, and inline line-numbered diff views. [page:48]
This page integrates with an external SWMM Filebase app to browse, search, pin, preview, copy, download, and open .inp files inside the simulator. [page:48]
A batch-processing workspace for multiple .inp files with drag-and-drop upload queues, WebSocket-powered progress updates, configurable settings, CSV export, and a simulation mode when no local SWMM engine is detected. [page:48]
A model-management and AI-powered analysis page with file upload, validation, 5 templates, INP section analysis, model summary, 7 sample models, and AI tools for model review, what-if analysis, anomaly detection, and model building via OpenAI-backed workflows. [page:48]
Project description, documentation, and social links. [page:48]
The most technically distinctive part of the app is the browser-side SWMM5 runtime. The documentation says the engine is compiled to WebAssembly and exposed through client/public/wasm/swmm5.js, while in-browser file handling is performed via the Emscripten file system API. [page:48]
This architecture allows:
- client-side file processing, [page:48]
- no mandatory server-side engine dependency for core simulations, [page:48]
- immediate model iteration in the browser, [page:48]
- and easier sharing of front-end-centric workflows such as result views and URL-based state. [page:48]
The engine auto-initializes on page load. Users see:
- a green “Engine v{version}” badge when ready, [page:48]
- a loading spinner during initialization, [page:48]
- or a red “Engine Unavailable” badge on failure. [page:48]
The replit.md file identifies several important project-specific libraries and components. [page:48]
client/src/lib/inpNetworkParser.tsparses INP sections such as[COORDINATES],[VERTICES],[SUBCATCHMENTS],[Polygons],[JUNCTIONS],[OUTFALLS],[STORAGE],[CONDUITS],[PUMPS],[ORIFICES], and[WEIRS]to build network topology. [page:48]client/src/lib/swmmBinaryParser.tsparses SWMM5 binary.OUTfiles into time-series data for nodes, links, subcatchments, and system variables. [page:48]client/src/lib/rptSectionParser.tspowers the advanced RPT section parsing, comparison, stats, and export features. [page:48]client/src/lib/swmmControlRules.tshandles control-rule parsing, templates, validation, import/export, and data models. [page:48]
network-map.tsxprovides the interactive SVG network map, [page:48]time-series-chart.tsxrenders result plots, [page:48]profile-plot.tsxbuilds longitudinal views, [page:48]run-comparison.tsxhandles two-run comparison, [page:48]inp-syntax-editor.tsxpowers syntax highlighting, [page:48]control-rule-editor.tsxsupports interactive[CONTROLS]authoring. [page:48]
Together these components make the frontend much more than a generic form-based shell. [page:48]
The simulator page includes links to other supporting tools and knowledge resources such as:
- SWMM5 Manual Search, [page:48]
- SWMM vs ICM solver comparison, [page:48]
- SWMM Docs, [page:48]
- INP Maker, [page:48]
- and the Rosetta Stone. [page:48]
This positions SWMM Engine as a hub in a broader SWMM-focused tool ecosystem rather than as an isolated app. [page:48]
The repository is primarily TypeScript (65.7%) with significant JavaScript (32.9%), plus small CSS and HTML portions. [page:48]
- React 18 with TypeScript, [page:48]
- Wouter for client-side routing, [page:48]
- TanStack React Query for server state and API data fetching, [page:48]
- shadcn/ui built on Radix UI, [page:48]
- Tailwind CSS with CSS-variable theming and light/dark mode, [page:48]
- Recharts for data visualization. [page:48]
- Express.js with TypeScript, [page:48]
- one HTTP server serving both API routes and static files, [page:48]
- Vite dev middleware for HMR in development, [page:48]
- static serving in production. [page:48]
- Drizzle ORM with PostgreSQL dialect, [page:48]
- schema in
shared/schema.ts, [page:48] - current default storage via in-memory
MemStorage, [page:48] - migrations handled by Drizzle Kit. [page:48]
- Vite with React plugin, [page:48]
- esbuild for production server bundling, [page:48]
- TypeScript strict mode, [page:48]
- Replit-specific development plugins such as cartographer, dev-banner, and runtime-error-modal. [page:48]
The app uses DM Sans, Geist Mono, Fira Code, and Architects Daughter via Google Fonts CDN. [page:48]
The root repository structure shown on GitHub includes: [page:48]
SWMM-Engine/
├── attached_assets/ # Supporting assets and examples
├── client/ # React frontend
├── script/ # Build/extraction scripts
├── server/ # Express backend
├── shared/ # Shared schema and types
├── .replit # Replit runtime config
├── components.json # shadcn/ui config
├── design_guidelines.md # UI/layout guidance
├── drizzle.config.ts # Drizzle config
├── package.json
├── package-lock.json
├── postcss.config.js
├── replit.md # Main architecture and feature notes
├── tailwind.config.ts
├── tsconfig.json
└── vite.config.ts
GitHub reports 96 commits on main, and the visible commit messages show ongoing additions such as:
- comprehensive RPT file analysis tools, [page:48]
- result sharing and subcatchment organization, [page:48]
- batch processing for multiple SWMM input files, [page:48]
- a Camel SWMM model-management and AI-analysis tool, [page:48]
- and simulation-management APIs connected to the home page. [page:48]
The design notes described in replit.md outline a professional engineering workspace layout:
- top toolbar for navigation/actions, [page:48]
- collapsible left sidebar for project tree/properties, [page:48]
- main canvas for network diagram editing/visualization, [page:48]
- right panel for settings, [page:48]
- bottom panel for logs/output. [page:48]
This reinforces that the app is meant to feel like a desktop engineering environment translated into the browser. [page:48]
- Node.js
- npm
- optional
DATABASE_URLif you want PostgreSQL-backed functionality instead of in-memory storage [page:48]
npm installnpm run devIn development, the server runs with Vite middleware and hot module replacement. [page:48]
npm run build
npm startThe app uses a single HTTP server pattern for both frontend and backend. [page:48]
The documentation says PostgreSQL is supported via DATABASE_URL, with Drizzle ORM and connect-pg-simple available for session storage. However, the current default storage implementation is in-memory MemStorage, which keeps the app easy to run even without a configured database. [page:48]
This means you can work with much of the app immediately, while still having a path to persistent storage later. [page:48]
SWMM Engine is aimed at:
- SWMM modelers, [page:48]
- hydraulic and hydrologic engineers, [page:48]
- consultants reviewing or comparing models, [page:48]
- users migrating from legacy workflows, [page:48]
- and teams that want browser-based model editing, simulation, and diagnostics. [page:48]
Because it includes advanced tools like RPT forensics, INP diffing, batch runs, and control-rule editing, it is especially relevant to power users rather than only casual learners. [page:48]
The primary internal documentation currently available is replit.md, which describes:
- the architecture, [page:48]
- route structure, [page:48]
- SWMM engine integration, [page:48]
- parsing libraries, [page:48]
- UI layout, [page:48]
- and external dependencies. [page:48]
The repo currently shows GitHub’s Add a README prompt, so adding this file would make the repository much more understandable to engineers and contributors at first glance. [page:48]
Add the appropriate license here if the repository is intended for public reuse.