api-visualizer

api-visualizer is a lightweight middleware that captures live API traffic from your local JavaScript or TypeScript server and streams it to a real-time WebSocket-based dashboard for inspection, debugging, and monitoring.

🔗 Live Dashboard: API Visualizer App

📚 Table of Contents

• Installation
• Usage (Express Example)
• Real-Time Dashboard
• Captured Data Format
• Use Cases
• License
• Author

Installation

Install the middleware using npm:

npm install api-visualizer

Usage (Express Example)

1. Register at the dashboard:
   👉 api-visualizer.vercel.app

2. Generate an API Key after logging in.

3. Add the middleware to your Express server:

import express from "express";

//-------- IMPORT API COMPONENTS --------
import { connectToTunnel, tunnelMiddleware } from "api-visualizer";

// ------- CONNECT TO THE TUNNEL WITH YOUR API KEY ---------
(async () => {
  try {
    connectToTunnel("YOUR_API_KEY"); // 🔑 REPLACE WITH YOU API KEY -------
  } catch (err) {
    console.error("[Tunnel] Failed to connect:", err);
  }
})();

const app = express();

// -------- ATTACH THE MIDDLEWARE -------
app.use(tunnelMiddleware);

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.post("/api", (req, res) => {
  res.json({ message: "Received", body: req.body });
});

app.listen(3000, () => {
  console.log("Server running at http://localhost:3000");
});

Real-Time Dashboard

Visualize API traffic from your local server in real time:
👉 API Visualizer App

Captured Data Format

Sample structure of the captured API request and response data:

{
  "method": "PATCH",
  "fullUrl": "http://localhost:3000/?key=value%2312",
  "route": "/",
  "queryParams": { "key": "value#12" },
  "duration": 7,
  "timestamp": 1751218377927,
  "size": { "request": 53, "response": 100, "total": 153 },
  "status": 200,
  "request": {
    "headers": {
      "authorization": "Basic a3JpOnNobmE=",
      "content-type": "application/javascript"
    },
    "body": "const a = 4, b = 3;\nconst c = a + b;\nconsole.log(c); ",
    "contentType": "javascript"
  },
  "response": {
    "statusCode": 200,
    "body": {
      "message": "Test PATCH successful",
      "data": "const a = 4, b = 3;\nconst c = a + b;\nconsole.log(c); "
    },
    "contentType": "json"
  },
  "authorization": {
    "hasAuthHeader": true,
    "authType": "basic",
    "parsed": { "username": "kri", "password": "shna" },
  },
  "meta": {
    "ip": "127.0.0.1",
    "protocol": "http",
    "httpVersion": "1.1",
    "deviceType": "desktop"
  }
}

Use Cases

• Inspect and debug API requests/responses live
• Monitor local backend traffic during development

License

MIT © 2025 Krishna Singha

Author

Krishna Singha ([email protected])