🚨 Important: Framework support is currently limited to Express. Vitals currently ships with an official adapter for Express only. Support for additional Node.js frameworks is planned.

Vitals provides a self-contained dashboard UI for visualizing live process and HTTP metrics collected by the Vitals engine.

⚠️ Note: Vitals is designed for live inspection and debugging — not long-term metrics storage or alerting.

📊 @vitalsjs/ui

The standalone dashboard package for Vitals.

@vitalsjs/ui provides the complete browser interface used to display live metrics. The dashboard is shipped as a single self-contained HTML document with embedded styles and scripts.

📥 Installation

npm install @vitalsjs/ui

or:

pnpm add @vitalsjs/ui

🚀 Usage

import { dashboardHtml } from "@vitalsjs/ui";

response.setHeader("Content-Type", "text/html");
response.end(dashboardHtml);

dashboardHtml can be served from any Node.js HTTP server.

✨ Features

• 📄 Single-file dashboard — complete HTML output
• 🎨 Built-in themes — light and dark mode support
• 📈 Live charts — runtime and HTTP metric visualization
• 🖥️ Runtime overview — CPU, memory, event loop and GC information
• 🌐 Traffic monitoring — requests, latency, routes and status codes
• 🚫 No runtime assets — no external frontend dependencies

📦 Export

dashboardHtml

dashboardHtml: string

Contains the complete dashboard HTML document.

Example:

import { dashboardHtml } from "@vitalsjs/ui";

serverResponse.end(dashboardHtml);

🔌 Usage with Express

For Express applications, install:

npm install @vitalsjs/express

The Express adapter automatically serves the dashboard and connects it to the Vitals engine.

🏗️ Integration

@vitalsjs/ui is designed to work with:

• @vitalsjs/core — metrics collection engine
• @vitalsjs/express — Express integration

📄 License

MIT © 2026 Ayush Jain