@hydration-audit/dashboard

Interactive web dashboard for visualizing JavaScript hydration costs.

Part of the Hydration Cost Visibility Platform.

Features

• Treemap Visualization — Islands sized by gzip cost, colored by severity
• Sortable Island Table — Click any column header to sort
• Budget Gauges — Visual meters for page and site-wide budgets
• Issue List — All detected issues with actionable recommendations
• Live Reload — Dashboard updates automatically via WebSocket when the report file changes

Usage

Via CLI (Recommended)

npx @hydration-audit/cli dashboard
npx @hydration-audit/cli dashboard --port 3000

Programmatic API

import { startDashboard } from '@hydration-audit/dashboard';

const { url, close } = await startDashboard(
  '.hydration-audit-report.json', // path to report
  4173,                          // port
);

console.log(`Dashboard at ${url}`);

// Later...
close();

How It Works

1. Reads the .hydration-audit-report.json file generated by the analyzer
2. Serves a lightweight SPA (vanilla JS, no framework runtime) on a local HTTP server
3. Opens a WebSocket connection to watch for report file changes
4. When the report changes (e.g., after a rebuild), all connected browsers update instantly

Dashboard Views

Treemap

Islands are displayed as rectangles proportional to their gzip size. Colors indicate severity:

• Green — Under 20KB, no issues
• Blue — 20-50KB, within budget
• Yellow — 50-100KB, warning
• Red — Over 100KB or has errors

Island Table

Sortable table with columns:

• Name, Directive, Framework, Gzip size, Brotli size, Issues, Pages

Budget Gauges

Visual progress bars showing:

• Per-page budget usage
• Total site budget usage

License

MIT