# multiple-cucumber-html-reporter

> Generate beautiful Cucumber.js reports for multiple instances (browsers / devices)

Latest version **4.3.0** (published 2026-08-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install multiple-cucumber-html-reporter
pnpm add multiple-cucumber-html-reporter
yarn add multiple-cucumber-html-reporter
bun add multiple-cucumber-html-reporter
```

Provides the command `mchr`.

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads; large bundle.

## Facts

| | |
|---|---|
| Version | 4.3.0 |
| Published | 2026-08-23 |
| First published | 2017-05-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=22 |
| Dependencies | 14 |
| Unpacked size | 10.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 281 |
| Author | WasiqB |
| Maintainers | wasiqb |
| Keywords | cucumber, html, test report, multiple-cucumber-html-reporter, html report, json to html |

## Links

- npm: https://www.npmjs.com/package/multiple-cucumber-html-reporter
- Repository: https://github.com/WasiqB/multiple-cucumber-html-reporter
- Homepage: https://multiple-cucumber-html-reporter.vercel.app/
- Issues: https://github.com/WasiqB/multiple-cucumber-html-reporter/issues
- Funding: https://github.com/sponsors/WasiqB
- npm.io page: https://npm.io/package/multiple-cucumber-html-reporter

## Dependencies (14)

- [find](https://npm.io/package/find.md) ^0.3.0
- [jiti](https://npm.io/package/jiti.md) ^2.7.0
- [open](https://npm.io/package/open.md) ^11.0.1
- [uuid](https://npm.io/package/uuid.md) ^14.0.2
- [luxon](https://npm.io/package/luxon.md) ^3.7.2
- [lodash](https://npm.io/package/lodash.md) ^4.18.1
- [js-yaml](https://npm.io/package/js-yaml.md) ^5.3.0
- [fs-extra](https://npm.io/package/fs-extra.md) ^11.4.0
- [jsonfile](https://npm.io/package/jsonfile.md) ^6.2.1
- [liquidjs](https://npm.io/package/liquidjs.md) ^10.29.0
- [stream-json](https://npm.io/package/stream-json.md) ^3.5.0
- [stream-chain](https://npm.io/package/stream-chain.md) ^4.2.5
- [@clack/prompts](https://npm.io/package/@clack/prompts.md) ^1.7.0
- [env-interpolation](https://npm.io/package/env-interpolation.md) ^1.1.1

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 4.3.0 (latest) — 2026-08-23
- 4.0.0-beta.0 (beta) — 2026-06-02
- 4.2.0 — 2026-08-01
- 4.1.0 — 2026-07-06
- 3.11.0 — 2026-07-05
- 4.0.0 — 2026-06-04
- 3.10.0 — 2026-02-12
- 3.9.3 — 2025-06-16
- 3.9.2 — 2025-02-20
- 3.9.1 — 2025-02-18
- 3.9.0 — 2025-01-09
- 3.8.0 — 2024-10-01
- 3.7.0 — 2024-07-20
- 3.6.2 — 2024-02-06
- 3.6.1 — 2024-01-15
- … 73 more at https://npm.io/package/multiple-cucumber-html-reporter/versions

## README

<div align="center">
  <img src="docs/public/images/logo.png" alt="logo" width="200" height="auto" />

  <h2>
    Multiple Cucumber HTML Reporter
  </h2>

  <h3>
    Generate beautiful, interactive and customizable HTML reports for Cucumber runs.
  </h3>

  <p>
    <a href="https://discord.gg/d6rfHkSDjc" target="_blank">
      <picture>
        <source media="(prefers-color-scheme: dark)" srcset="https://www.shieldcn.dev/discord/online-members/d6rfHkSDjc.svg?variant=branded&amp;size=sm&amp;mode=dark">
        <img alt="Discord Online" src="https://www.shieldcn.dev/discord/online-members/d6rfHkSDjc.svg?variant=branded&amp;size=sm&amp;mode=light">
      </picture>
    </a>
    <a href="https://github.com/WasiqB/multiple-cucumber-html-reporter/actions" target="_blank">
      <picture>
        <source media="(prefers-color-scheme: dark)" srcset="https://www.shieldcn.dev/github/ci/WasiqB/multiple-cucumber-html-reporter.svg?variant=secondary&amp;size=sm&amp;mode=dark">
        <img alt="CI" src="https://www.shieldcn.dev/github/ci/WasiqB/multiple-cucumber-html-reporter.svg?variant=secondary&amp;size=sm&amp;mode=light">
      </picture>
    </a>
    <a href="https://www.npmjs.com/package/multiple-cucumber-html-reporter" target="_blank">
      <picture>
        <source media="(prefers-color-scheme: dark)" srcset="https://www.shieldcn.dev/github/release/WasiqB/multiple-cucumber-html-reporter.svg?size=sm&amp;mode=dark">
        <img alt="Release" src="https://www.shieldcn.dev/github/release/WasiqB/multiple-cucumber-html-reporter.svg?size=sm&amp;mode=light">
      </picture>
    </a>
    <a href="https://www.npmjs.com/package/multiple-cucumber-html-reporter" target="_blank">
      <picture>
        <source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/dm/multiple-cucumber-html-reporter.svg?variant=secondary&amp;mode=dark">
        <img alt="npm downloads" src="https://shieldcn.dev/npm/dm/multiple-cucumber-html-reporter.svg?variant=secondary&amp;mode=light">
      </picture>
    </a>
    <a href="https://www.npmjs.com/package/multiple-cucumber-html-reporter" target="_blank">
      <picture>
        <source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/dw/multiple-cucumber-html-reporter.svg?variant=secondary&amp;mode=dark">
        <img alt="npm downloads" src="https://shieldcn.dev/npm/dw/multiple-cucumber-html-reporter.svg?variant=secondary&amp;mode=light">
      </picture>
    </a>
    <a href="http://opensource.org/licenses/MIT">
      <picture>
        <source media="(prefers-color-scheme: dark)" srcset="https://www.shieldcn.dev/github/license/WasiqB/multiple-cucumber-html-reporter.svg?variant=ghost&amp;size=sm&amp;mode=dark">
        <img alt="License" src="https://www.shieldcn.dev/github/license/WasiqB/multiple-cucumber-html-reporter.svg?variant=ghost&amp;size=sm&amp;mode=light">
      </picture>
    </a>
    <a href="https://github.com/sponsors/WasiqB" target="_blank">
      <picture>
        <source media="(prefers-color-scheme: dark)" srcset="https://www.shieldcn.dev/badge/Sponsor-GitHub-ea4aaa.svg?logo=githubsponsors&amp;variant=secondary&amp;size=sm&amp;mode=dark">
        <img alt="GitHub Sponsors" src="https://www.shieldcn.dev/badge/Sponsor-GitHub-ea4aaa.svg?logo=githubsponsors&amp;variant=secondary&amp;size=sm&amp;mode=light">
      </picture>
    </a>
  </p>
</div>

---

## 🌟 Why this reporter?

**Multiple Cucumber HTML Reporter** is a robust reporting module that transforms standard Cucumber JSON output into stunning, feature-rich HTML reports. Unlike generic reporters, it is designed for scale and clarity.

### ✨ Key Features

-   📊 **Interactive Dashboard**: Scored overview of all tested features and scenarios.
-   🌓 **Dark Mode Support**: Built-in support for light and dark themes for better accessibility.
-   🔄 **Multiple Runs**: Consolidate multiple runs of the same feature (e.g., across different browsers or devices).
-   📱 **Rich Metadata**: Automatically display browser, device, platform, and app version details.
-   🔍 **Advanced Filtering**: Easily search, filter, and sort through large test suites.
-   🎨 **Fully Customizable**: Add custom data blocks, brand colors, logo, footer, and additional CSS styles.
-   ⚡ **Built for Scale**: Streams report generation, so suites with heavy screenshot/video attachments don't run out of memory.
-   🖥️ **CLI Tool** *(new in v4.2.0)*: Generate reports instantly with the `mchr` CLI — no scripting required.

---

## 🚀 Quick Start

> [!IMPORTANT]
> **v4.2.0+** introduces the `mchr` CLI tool — the recommended way to generate reports. No scripting needed!

### Option A: CLI Tool *(Recommended — v4.2.0+)*

#### 1. Install globally

```shell
npm install multiple-cucumber-html-reporter --global
# or
pnpm add multiple-cucumber-html-reporter --global
```

#### 2. Create a config file

Create a `.multiple-cucumber-html-reporter.json` file in your project root:

```json
{
  "jsonDir": "./path-to-your-json-output/",
  "reportPath": "./path-where-the-report-needs-to-be/",
  "pageTitle": "My Project Report",
  "reportName": "My Project",
  "displayDuration": true,
  "displayReportTime": true
}
```

> [!TIP]
> Run `mchr` for the first time without a config file to launch an interactive onboarding wizard that creates the config file for you.

#### 3. Generate the report

```shell
mchr
```

That's it! No separate script needed. See the [CLI documentation](https://multiple-cucumber-html-reporter.vercel.app/docs/latest/cli) for all available config options.

---

### Option B: Programmatic API

If you prefer to generate the report from a Node.js script, install locally and call `generate()` directly:

```shell
pnpm add multiple-cucumber-html-reporter --save-dev
```

```typescript
// generate-report.ts
import { generate } from 'multiple-cucumber-html-reporter';

generate({
  jsonDir: "./path-to-your-json-output/",
  reportPath: "./path-where-the-report-needs-to-be/",
  metadata: {
    browser: {
      name: "chrome",
      version: "latest",
    },
    device: "Local test machine",
    executionPlatform: 'local',
    platform: {
      name: "osx",
      version: "Sonoma",
    },
  },
  customData: {
    projectName: 'WebDriverIO sample project',
    release: '1.2.0',
    testCycle: 'Cycle 1',
    buildNumber: 'Build 1',
    environment: 'production',
    ciPipeline: 'GitHub Actions',
  },
});
```

Check out the [examples](./examples) folder for integration with frameworks like Cypress.

---

## 📖 In-Depth Documentation

Looking for advanced configurations, framework integrations (WebdriverIO, Cypress, etc.), or FAQs? Visit our comprehensive documentation site:

### [👉 Read the Full Documentation](https://multiple-cucumber-html-reporter.vercel.app/docs/latest)

---

## 🖼️ Feature Showcase

### Feature List Page

![Feature List Page](./docs/public/images/feature-list-page.jpeg)

### Feature Details Page

![Feature Details Page](./docs/public/images/feature-detail-page.jpeg)

---

## 🤝 Contributing & Community

Contributions are what make the open source community such an amazing place to learn, inspire, and create.

- **Contributing**: Read our [Contributing Guide](https://multiple-cucumber-html-reporter.vercel.app/docs/latest/contributing) to get started.
- **Security**: Please report vulnerabilities via our [Security Policy](./.github/SECURITY.md).
- **Code of Conduct**: We expect all contributors to follow our [Code of Conduct](./.github/CODE_OF_CONDUCT.md).

### 💬 Support & Talk

- **Discord**: [Join our Discord server](https://discord.gg/d6rfHkSDjc) for real-time support.
- **GitHub Issues**: [Report bugs or request features](https://github.com/WasiqB/multiple-cucumber-html-reporter/issues).
- **GitHub Discussions**: [Join our GitHub Discussions](https://github.com/WasiqB/multiple-cucumber-html-reporter/discussions).
- **Project Milestones**: [View complete Roadmap in Project Milestones](https://github.com/WasiqB/multiple-cucumber-html-reporter/milestones).
- **Follow project updates**: Follow the latest project updates on [X (formerly Twitter)](https://x.com/WasiqBhamla) and [LinkedIn](https://www.linkedin.com/in/wasiqbhamla).

## ❤️ Support the project

If you find this project useful, please consider [sponsoring the maintainer](https://github.com/sponsors/WasiqB). Your support helps keep the project maintained and improved!

## 🙏🏻 Open Source Supporter

Following are the awesome supporters to the project who has sponsored their applications paid license:

<div style="display: flex; align-items: center; justify-content: center; gap: 20px;">
  <a href="https://vercel.com/open-source-program">
    <img alt="Vercel OSS Program" src="https://vercel.com/oss/program-badge-2026.svg" />
  </a>
</div>

## 💗 Repo Activity

![Multiple Cucumber HTML Reporter Repo activity](https://repobeats.axiom.co/api/embed/b0964ed36e8c350255ca9b3f357459af82d712a4.svg "Repobeats analytics image")

## ⚖️ License

Distributed under the MIT License. See `LICENSE` for more information.

---

<p align="center">Built with ❤️ by <a href="https://wasiqbhamla.com/">Wasiq Bhamla</a></p>

---
_Source: https://npm.io/package/multiple-cucumber-html-reporter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._