# diffable-html

> Opinionated HTML formatter focused towards making HTML diffs readable.

Latest version **6.0.1** (published 2025-02-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install diffable-html
pnpm add diffable-html
yarn add diffable-html
bun add diffable-html
```

## Health

**Score 33/100 (F)** — status: maintenance-mode.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.0.1 |
| Published | 2025-02-17 |
| First published | 2017-04-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/diffable-html) |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 38 |
| Author | Raymond RUTJES |
| Maintainers | haroenv, jasonberry, instantsearch-bot, dhaya.b, eunjae-lee, rayrutjes |
| Keywords | html, formatter, diff, diffable, jest, snapshot, serializer, snapshotSerializer, string, vue, vue.js, test, beautifier, js-beautify |

## Links

- npm: https://www.npmjs.com/package/diffable-html
- Repository: https://github.com/rayrutjes/diffable-html
- Homepage: https://github.com/rayrutjes/diffable-html#readme
- Issues: https://github.com/rayrutjes/diffable-html/issues
- npm.io page: https://npm.io/package/diffable-html

## Dependencies (1)

- [htmlparser2](https://npm.io/package/htmlparser2.md) ^5.0.1

## Alternatives

- [duck](https://npm.io/package/duck.md) — 4.2M weekly downloads
- [ava](https://npm.io/package/ava.md) — 560.2K weekly downloads
- [storybook-addon-module-mock](https://npm.io/package/storybook-addon-module-mock.md) — 71.7K weekly downloads
- [vest](https://npm.io/package/vest.md) — 50.1K weekly downloads
- [@ethereum-waffle/mock-contract](https://npm.io/package/@ethereum-waffle/mock-contract.md) — 40.0K weekly downloads

## Recent versions

- 6.0.1 (latest) — 2025-02-17
- 6.0.0 — 2025-02-15
- 5.0.0 — 2021-10-19
- 4.1.0 — 2021-07-13
- 4.0.0 — 2018-12-31
- 3.0.0 — 2018-01-03
- 2.1.0 — 2017-05-27
- 2.0.1 — 2017-05-18
- 2.0.0 — 2017-05-18
- 1.0.0 — 2017-04-18
- 0.2.0 — 2017-04-18
- 0.1.0 — 2017-04-18

## README

# Opinionated HTML formatter focused towards making HTML diffs readable.

[![NPM version](https://badge.fury.io/js/diffable-html.svg)](https://yarnpkg.org/en/package/diffable-html)
[![Build Status](https://travis-ci.org/rayrutjes/diffable-html.svg?branch=master)](https://travis-ci.org/rayrutjes/diffable-html)

This formatter will normalize your HTML in a way that when you diff it, you get a clear sense of what changed.

This is a "zero-config" and opinionated HTML formatter. Default rules might change in future releases in which case we will push a major release.

Feel free to open issues to discuss better defaults.

Formatting consists of:
- indenting every level with 2 spaces
- align attributes
- put every opening and closing tag on its own line
- trimming text nodes

*Be aware that this plugin is intended for making HTML diffs more readable.
We took the compromise of not dealing with white-spaces like the browsers do.*

## Install

Add the package as a dev-dependency:

```bash
# With npm
npm install --save-dev diffable-html

# With yarn
yarn add --dev diffable-html
```


## Example

```js
import toDiffableHtml from 'diffable-html';

const html = `
<div id="header">
  <h1>Hello World!</h1>
  <ul id="main-list" class="list"><li><a href="#">My HTML</a></li></ul>
</div>
`

console.log(toDiffableHtml(html));
```

Will output:

```html
<div id="header">
  <h1>
    Hello World!
  </h1>
  <ul
    id="main-list"
    class="list"
  >
    <li>
      <a href="#">
        My HTML
      </a>
    </li>
  </ul>
</div>
```

## Yet another HTML formatting plugin?

This formatter was initially developed to address the lack of some features in [js-beautifier](https://github.com/beautify-web/js-beautify):

- Put the inner content of each tag on its own line (beautify-web/js-beautify#980)
- Put closing bracket on its own line (beautify-web/js-beautify#937)
- Indent every text node

These features are needed to improve readability of HTML diffs.

## Usage with Jest

Development of this plugin was motivated by making testing of Vue.js components easier
by the use of [Jest with snapshot tests](https://facebook.github.io/jest/docs/snapshot-testing.html).

You can find a serializer for formatting your HTML here [Jest serializer](https://github.com/rayrutjes/jest-serializer-html).

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