proposal: modern single-file HTML coverage reporter (React + Monaco)

[travzhang]

Status: Proposal / Discussion (Draft)

Hi maintainers 👋

This PR is not meant as a hard replacement of the existing html reporter.
I’d love to discuss whether a modern HTML coverage report would be a good fit for @vitest/istanbul-lib-report, and how you’d prefer to integrate it if so.

I’ve been building a modern Istanbul HTML reporter here:

• Repo: https://github.com/travzhang/istanbul-report-html
• Packages: canyonjs-dev-report + optional canyonjs-dev-report-html

The current branch is only a spike to make the idea easy to try locally.

Motivation

The classic html / html-spa reporters are solid, but a few UX/maintenance gaps remain for modern tooling:

1. Modern frontend toolchain – UI built with React + Vite, easier to iterate on and maintain than templated multi-file HTML.
2. Single-file output – all report assets are embedded in one index.html (no asset tree to host/copy).
3. Monaco-based uncovered highlighting – richer source navigation / uncovered region highlighting in the browser.

What this spike currently does

• Registers the modern reporter behind the existing "html" name (temporary, for local demo only)
• Adds a small Vitest reporter script so pnpm test can generate the HTML report locally
• Pulls in canyonjs-dev-report via pnpm catalog

Important: replacing "html" in this branch is only for convenience while exploring.
For a real integration I’d strongly prefer a non-breaking approach.

Proposed integration options (open to guidance)

I’d be happy to adjust in whichever direction you prefer:

1. Add a new report type (preferred for first merge): e.g. "html-modern" alongside existing "html" / "html-spa"
2. Optional peer dependency: keep core package lean; enable modern UI when the HTML package is installed
3. Vendor / rename into this monorepo: move the reporter under @vitest/* if that’s the long-term preference
4. Longer-term: discuss whether "html" should eventually default to the modern implementation (with migration notes)

Design sketch

coverage data (istanbul)
        ↓
@vitest/istanbul-lib-report create("html-modern")
        ↓
modern reporter (React UI template + injected reportData)
        ↓
coverage/index.html  (single file, Monaco highlighting)

Key properties:

• Compatible with the existing ReportBase / createContext flow
• Keeps JSON/LCOV/etc. reporters untouched
• HTML UI dependency can stay optional so users who only need json/lcov pay no extra cost

Open questions for maintainers

1. Are you open to a modern HTML reporter in this fork at all?
2. Prefer new report name vs eventually replacing "html"?
3. Prefer external package vs vendoring into this monorepo?
4. Any constraints around package naming, bundle size, or Node/browser support we should follow?
5. Would you rather continue this as an issue/discussion first, and keep code changes minimal until direction is clear?

Demo / references

• Modern reporter source: https://github.com/travzhang/istanbul-report-html
• Usage today (standalone):

coverage: {
  provider: "istanbul",
  reporter: [
    "json",
    // path to canyonjs-dev-report, or a future "html-modern"
  ],
}

Happy to reshape this PR however you prefer — including converting it into a pure design discussion and removing the temporary "html" override.

Thanks for your time!

[travzhang]

[AriPerkkio]

Hey @travzhang - awesome to have you here! 🙌

I didn't yet take a look at canyonjs-dev-report - rushing a bit to get this initial fork up and running at the moment. But I've been thinking that now that we have full control over istanbul-reports, we should definitely modernize and improve the existing reporters. I was thinking about adding dark mode to the original html reporter and style everything with Vitest's color palette. At first it would probably be a new html-modern reporter which later gets renamed html, while the old one becomes html-legacy.

[hi-ogawa]

Builtin single-file coverage html will likely unblock the following issue with simpler integration on ui reporter side:

• Make coverage available in html reporter singleFile mode vitest#10238

[travzhang]

Hey @travzhang - awesome to have you here! 🙌

I didn't yet take a look at canyonjs-dev-report - rushing a bit to get this initial fork up and running at the moment. But I've been thinking that now that we have full control over istanbul-reports, we should definitely modernize and improve the existing reporters. I was thinking about adding dark mode to the original html reporter and style everything with Vitest's color palette. At first it would probably be a new html-modern reporter which later gets renamed html, while the old one becomes html-legacy.

Thanks @AriPerkkio! Happy to follow the html-modern → later html / html-legacy path.

I’ll keep iterating on this as a non-breaking html-modern spike.

[travzhang]

Hi @AriPerkkio @hi-ogawa — pushed an update based on your feedback. Summary of what changed:

Aligned with the html-modern path

• Added a new "html-modern" report in @vitest/istanbul-lib-report (no change to existing "html" / "html-spa")
• Removed the temporary "html" override from the earlier spike

Vendored into this monorepo

• Dropped the external canyonjs-dev-report dependency
• UI lives in @vitest/istanbul-report-html-modern; the reporter injects coverage data into the built single-file dist/index.html

Behavior

• Output: one index.html under the coverage dir (no asset tree)
• Compatible with the existing ReportBase / createContext flow
• Optional writeReportDataJson for debugging

This is still a spike / proposal PR — happy to iterate on naming, bundle size, theming (Vitest palette / dark mode), or whether @vitest/istanbul-report-html-modern should stay workspace-only vs published as optional peer.

Would appreciate a look when you have time. Also happy to update the PR description to reflect the current shape if that's helpful.

[travzhang]