Every time you try to untangle which processes are listening on which ports and how they relate on your machine, you end up juggling netstat or lsof outputs that don’t tell the full story. PortPal is a desktop dashboard that turns this chaos into an interactive, real-time network map with clickable nodes and force-directed graphs — letting you visualize and control your system’s ports like never before.
What portpal does and how it’s built
PortPal is a cross-platform desktop app built on Tauri 2, which means it uses a Rust backend alongside a native webview frontend powered by React 19, TypeScript, and Vite 7. It monitors all listening ports on your machine, detects common frameworks running on those ports, and visualizes the network topology as an interactive D3.js force-directed graph.
Under the hood, PortPal replaces manual netstat or lsof workflows by continuously scanning ports using a native scanner implemented with Rust’s sysinfo crate. This scanner is more efficient and precise than relying solely on OS command wrappers. The backend also maintains a thread-safe singleton event logger using lazy_static, ensuring that port events and process changes are tracked consistently even when the UI is closed.
The frontend visualizes ports as nodes colored by detected frameworks (React, Angular, Node.js, Django, Redis, Postgres, and more) with edges representing active connections. This force-directed graph simulation uses D3.js v7, allowing nodes to be dragged, collide naturally, and update in real time with metrics.
Styling is done with custom vanilla CSS featuring a glassmorphism aesthetic, giving the UI a modern but lightweight feel without adding heavy CSS frameworks. The system tray daemon runs in the background to maintain historical event logging and allow quick access without keeping the main window open.
The app also detects frameworks by scanning default port signatures and crawling project manifest files, adding valuable project context to raw network data.
What sets portpal’s architecture and implementation apart
The combination of Tauri 2 with Rust and React provides a solid balance of native performance and modern frontend flexibility. Using Rust for the port scanner means PortPal can quickly and safely interface with low-level OS information, avoiding typical bottlenecks of purely JS-based tools.
The custom native port scanner built on sysinfo is a notable technical choice. While many tools wrap OS commands, PortPal’s approach allows more precise control and integration into the Rust backend event logger.
The thread-safe singleton event logger implemented with lazy_static is a practical concurrency pattern ensuring event data integrity across threads and app state. This design choice stands out as it facilitates consistent historical data logging even when the UI is closed.
Using D3.js force-directed graphs for real-time topology visualization gives PortPal an edge over traditional CLI tools by making network relationships visually tangible. The physics simulation with drag-and-collide behavior creates an intuitive experience for exploring port conflicts or service dependencies.
Framework detection via a combination of default port signatures and manifest file crawling enriches the data, but the tradeoff is that it relies on conventional ports and standard project setups, which may miss atypical configurations or custom ports.
Styling the UI with vanilla CSS and glassmorphism avoids dependencies on UI libraries, keeping the app lightweight. However, it might limit rapid UI iteration or theming flexibility compared to component frameworks.
Overall, the code structure reflects a thoughtful balance between native system integration, reactive frontend UX, and maintainable concurrency patterns.
Quick start
To get started with PortPal in a development environment, the README provides the following commands:
# Install & Run
npm install
npm run tauri dev
This boots up the app with Vite’s hot module replacement, allowing you to edit React components and see changes instantly alongside the Rust backend watcher. It’s a solid developer experience that encourages rapid experimentation and debugging.
Who should consider portpal and what to watch out for
PortPal is relevant for developers and sysadmins who regularly monitor service ports and want a richer, visual understanding of their network topology. If you find yourself constantly juggling netstat outputs or manually killing processes, PortPal’s real-time tracking and one-click termination features will feel like a breath of fresh air.
The app’s ability to detect frameworks and map their connections visually can help quickly diagnose port conflicts or understand service dependencies without digging through logs or configs.
That said, PortPal’s approach comes with some tradeoffs. The reliance on port signature detection means it may miss custom setups or frameworks running on non-standard ports. Its architecture, combining Rust and React with Tauri, adds some complexity to the codebase and build process.
The UI styling, while neat, may not suit everyone’s taste or accessibility needs out of the box.
In production, this means PortPal is a specialized tool best suited for developer desktops or workstations rather than large-scale monitoring infrastructure. But as a local, interactive port monitor with a visual topology, it fills a niche that many CLI-focused tools miss.
If you want to replace the pain of manual port checks with a live, clickable network graph that understands your frameworks and lets you control processes easily, PortPal is worth trying.
→ GitHub Repo: wisher567/Portpal ⭐ 213 · TypeScript