diffable-html

What is diffable-html?

The diffable-html npm package is designed to help developers compare and visualize differences between HTML documents. It is particularly useful for testing and debugging purposes, allowing users to see what has changed between two versions of an HTML document.

What are diffable-html's main functionalities?

HTML Comparison

This feature allows you to compare two HTML strings and get a diff representation of the changes. The code sample demonstrates how to use the diffable-html package to compare two HTML documents and output the differences.

const diffableHtml = require('diffable-html');
const html1 = '<div><p>Hello World</p></div>';
const html2 = '<div><p>Hello Universe</p></div>';
const diff = diffableHtml(html1, html2);
console.log(diff);

Customizing Diff Output

This feature allows you to customize the output of the diff by passing options. The code sample shows how to enable wrapping of the diff output by passing an options object.

const diffableHtml = require('diffable-html');
const html1 = '<div><p>Hello World</p></div>';
const html2 = '<div><p>Hello Universe</p></div>';
const options = { wrap: true };
const diff = diffableHtml(html1, html2, options);
console.log(diff);

Other packages similar to diffable-html

html-differ

The html-differ package provides similar functionality for comparing HTML documents. It offers a more flexible API for customizing the comparison process and supports various output formats. Compared to diffable-html, html-differ may offer more advanced customization options.

diff

The diff package is a general-purpose text comparison library that can be used to compare HTML documents as well. While it is not specifically designed for HTML, it provides a robust set of tools for comparing and visualizing differences in text, including HTML. It is more versatile but may require additional setup for HTML-specific use cases.

jsdiff

The jsdiff package is another general-purpose text comparison library that can be used for HTML. It provides a variety of diff algorithms and output formats, making it a powerful tool for comparing HTML documents. Like diff, it is not specifically tailored for HTML but is highly flexible and widely used.

README

Opinionated HTML formatter focused towards making HTML diffs readable.

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:

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

# With yarn
yarn add --dev diffable-html

Example

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:

<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:

• 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.

You can find a serializer for formatting your HTML here Jest serializer.