TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published


    Diff and markup HTML with <ins> and <del> tags.


    Quote from the original source of this fork:

    htmldiff.js is a JavaScript port of https://github.com/myobie/htmldiff by Keanu Lee at Inkling.

    htmldiff.js is based on this fork and adds a few things:

    • Diffing of video, math, widget, iframe, img and svg tags.
    • Ability to set atomic tags via the API.
    • A command line interface.
    • TypeScript support.
    • Better documentation.

    See also Credits below.


    htmldiff takes two HTML snippets or files and marks the differences between them with <ins> and <del> tags. The diffing understands HTML so it doesn't do a pure text diff, instead it will insert the appropriate tags for changed/added/deleted text nodes, single tags or tag hierarchies.

    The module can be used as module in Node.js, with RequireJS, or even just as a script tag.


    The module exports a single default function:


    diff(before, after, className, dataPrefix, atomicTags);


    function diff(before: string, after: string, className?: string | null, dataPrefix?: string | null, atomicTags?: string | null): string;


    • before (string) is the original HTML text.
    • after (string) is the HTML text after the changes have been applied.

    The return value is a string with the diff result, marked by <ins> and del tags. The function has three optional parameters. If an empty string or null is used for any of these three parameters it will be ignored:

    • className (string) className will be added as a class attribute on every inserted <ins> and <del> tag.
    • dataPrefix (string) The data prefix to use for data attributes. The so called operation index data attribute will be named data-${dataPrefix-}operation-index. If not used, the default attribute name data-operation-index will be added on every inserted <ins> and <del> tag. The value of this attribute is an auto incremented counter.
    • atomicTags (string) Comma separated list of tag names. The list has to be in the form tag1,tag2,... e. g. head,script,style. An atomic tag is one whose child nodes should not be compared - the entire tag should be treated as one token. This is useful for tags where it does not make sense to insert <ins> and <del> tags. If not used, the default list will be used: iframe,object,math,svg,script,video,head,style.



      diff = require('node-htmldiff');
      console.log(diff('<p>This is some text</p>', '<p>That is some more text</p>', 'myClass'));


      import diff from 'node-htmldiff';
      console.log(diff("<p>This is some text</p>", "<p>That is some more text</p>", "myClass"));

    Please note that diff is only an arbitrary name; since the module exports only one default function you can use whatever name you like, e. g., diffHTML.


    <p><del data-operation-index="1" class="myClass">This</del><ins data-operation-index="1" class="myClass">That</ins> is some<ins data-operation-index="3" class="myClass"> more</ins> text.</p>

    Command line interface

    htmldiff beforeFile afterFile diffedFile [-c className] [-p dataPrefix] [-t atomicTags]


    • beforeFile An HTML input file in its original form.

    • afterFile An HTML input file, based on beforeFile but with changes.

    • diffedFile Name of the diffed HTML output file. All differences between beforeFile and afterFile will be surrounded with <ins> and <del> tags. If diffedFile is - (minus) the result will be written with console.log() to stdout.


    -c className, -p dataPrefix and -t atomicTags are all optional. For a description please see API documentation above.


    After cloning the repository run npm i or npm install to install the necessary dependencies. A run of npm run make creates the JavaScript output file. npm run lint checks the TypeScript sources with TSLint. npm test runs all the tests from the test directory. npm run testsample diffs the HTML sample files from the directory sample and logs the result to the console.

    The command line interface of htmldiff is developed in TypeScript so you have to run npm run make once to create the JavaScript output file.


    This module wouldn't have been possible without code from the following projects/persons:


    MIT © idesis GmbH, Rellinghauser Straße 334F, D-45136 Essen

    See the LICENSE file for details.


    npm i v-node-htmldiff

    DownloadsWeekly Downloads






    Unpacked Size

    116 kB

    Total Files


    Last publish


    • nataliesantiago