@fd-fastest/reporter-html

Interactive HTML reporter for the FD-Fastest performance toolkit. It converts the structured JSON report into a rich dashboard with charts, bundle insights, and drill-down details for each route.

Features

• Core Web Vitals, asset size, and bundle composition visualisations powered by Chart.js.
• Route table with interactive detail panel, duplicate detection, and module breakdowns.
• Budget failure callouts and summary metrics.
• Optional standalone mode that inlines assets for easy sharing.
• Comparison report generator for baseline vs current runs.

Usage

import { generateHtmlReport } from '@fd-fastest/reporter-html';
import type { Report } from '@fd-fastest/reporter-json';

async function writeDashboard(report: Report) {
  await generateHtmlReport(report, 'reports/dashboard.html', {
    title: 'Weekly regression run',
    theme: 'light',
    standalone: false, // copies assets/styles/app.js next to the HTML file
  });
}

To generate a baseline comparison:

import { generateComparisonHtml } from '@fd-fastest/reporter-html';

await generateComparisonHtml(
  baselineReport,
  currentReport,
  'reports/compare.html'
);

CLI Integration

Add html to the formats array in fd-fastest.config.{js,ts}:

export default {
  output: {
    dir: 'reports',
    formats: ['json', 'md', 'html'],
  },
};

Running fd-fastest lab will emit report.html alongside other artefacts.