Clash Master: A Modern Dashboard for OpenClash Traffic Management

February 09, 2026

Category: Practical Open Source Projects

Tags:

Docker Clash OpenClash Traffic Monitoring Dashboard

Clash Master: A Modern Dashboard for OpenClash Traffic Management

OpenClash is a popular proxy/router solution for managing VPN and ad‑blocking traffic on routers. While its backend APIs provide raw data, they lack an intuitive visual interface.

Enter Clash Master – a modern, open‑source dashboard built with Next.js, React 19, TypeScript, Tailwind CSS, and a Node .js data collector. It gives you:

Live traffic charts (bandwidth, latency, regions)
Interactive rule statistics and pagination
Device, IP and domain insights
WebSocket‑powered real‑time updates
Docker‑friendly deployment
Multi‑architecture images (amd64 & arm64)
Easy data persistence via SQLite

Why Use Clash Master?

Feature	Benefit
Web UI + API	Front‑end can access data through the same domain – no extra ports needed
WebSocket	Instant updates for dashboards without polling
Docker Compose	Zero‑config, plug‑and‑play deployment
Data collector	Runs as a separate micro‑service, keeping the UI lightweight
CLI scripts	`setup.sh` auto‑detects port conflicts and generates the required `docker‑compose.yml`

Quick Start with Docker Compose (Recommended)

Create a docker-compose.yml file with the following

services:
  clash-master:
    image: foru17/clash-master:latest
    container_name: clash-master
    restart: unless-stopped
    ports:
      - "3000:3000"  # Web UI
      - "3001:3001"  # API (optional)
      - "3002:3002"  # WebSocket (optional)
    volumes:
      - ./data:/app/data
    environment:
      - NODE_ENV=production

Run
```
docker compose up -d
```
Open http://localhost:3000 in a browser.
The first visit will prompt you to add an OpenClash backend (IP, port, optional token). After saving, the collector will start gathering data.

One‑Click Script

For those who prefer a single command:

curl -fsSL https://raw.githubusercontent.com/foru17/clash-master/main/setup.sh | bash

The script: 1. Downloads a ready docker‑compose.yml. 2. Checks the default ports 3000/3001/3002 for conflicts. 3. Suggests alternative ports if needed. 4. Creates a config file and starts the container.

Running From Source (Development)

git clone https://github.com/foru17/clash-master.git
cd clash-master
pnpm install
pnpm dev

Visit http://localhost:3000 – the dev server will watch for changes.

Port Conflict Resolution

If you encounter port already in use errors: 1. Create a .env file:

WEB_EXTERNAL_PORT=8080
API_EXTERNAL_PORT=8081
WS_EXTERNAL_PORT=8082

2. Restart the stack:

docker compose down
docker compose up -d

3. Browse http://localhost:8080.

Alternative: Edit `docker‑compose.yml`

ports:
  - "8080:3000"
  - "8081:3001"
  - "8082:3002"

Data Persistence & Backup

The collector stores statistics in ./data/stats.db. To back up:

cp -r ./data ./data-backup-$(date +%Y%m%d)

To clear history, use the UI’s “Database” tab to delete entries older than a chosen age.

FAQ Highlights

Port conflict? Adjust .env or docker‑compose.yml.
API access? Expose port 3001 or set API_URL env.
WebSocket? Expose port 3002 or set WS_URL env.
Connectivity to OpenClash? Ensure the router’s External Control is enabled and the token (if used) matches.

Conclusion

Clash Master turns raw OpenClash metrics into an interactive, developer‑friendly dashboard. Whether you’re a network admin or hobbyist, the combination of modern tooling, Docker‑friendly deployment, and robust data collection makes it the go‑to solution for visualising VPN traffic on any platform.

Tip: Star the project on GitHub – it’s free and helps maintain active development.

Original Article: View Original

Share this article