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)

1. 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

1. Run

docker compose up -d

1. Open http://localhost:3000 in a browser.
2. 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

1. Restart the stack:

docker compose down
docker compose up -d

1. 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.