Have ideas to improve npm?Join in the discussion! »


    7.0.0 • Public • Published


    npm version downloads js-standard-style

    Hyper fast diffing algorithm for real DOM nodes ⚡️


    var morph = require('tatermorph')
    var html = require('bel')
    var tree = html`<div>hello people</div>`
    // document.body === <body><div>hello people</div></body>
    morph(tree, html`<div>nanananana-na-no</div>`)
    // document.body === <body><div>nanananana-na-no</div></body>
    morph(tree, html`<div>teeny, tiny, tin bottle</div>`)
    // document.body === <body><div>teeny, tiny, tin bottle</div></body>

    Clearing Input Values

    To remove values from inputs, there's a few options:

    html`<input class="beep" value=${null}>` // set the value to null
    html`<input class="beep">`               // omit property all together

    Reordering Lists

    It's common to work with lists of elements on the DOM. Adding, removing or reordering elements in a list can be rather expensive. To optimize this you can add an id attribute to a DOM node. When reordering nodes it will compare nodes with the same ID against each other, resulting in far fewer re-renders. This is especially potent when coupled with DOM node caching.

    var el = html`
        <div id="first">hello</div>
        <div id="second">world</div>

    Caching DOM elements

    Sometimes we want to tell the algorithm to not evaluate certain nodes (and its children). This can be because we're sure they haven't changed, or perhaps because another piece of code is managing that part of the DOM tree. To achieve this tatermorph evaluates the .isSameNode() method on nodes to determine if they should be updated or not.

    var el = html`<div>node</div>`
    // tell tatermorph to not compare the DOM tree if they're both divs
    el.isSameNode = function (target) {
      return (target && target.nodeName && target.nodeName === 'DIV')


    How is this different from morphdom?

    It's quite similar actually; the API of this library is completely compatible with morphdom and we've borrowed a fair few bits. The main difference is that we copy event handlers like onclick, don't support browsers that are over a decade old, and don't provide custom behavior by removing all hooks. This way we can guarantee a consistent, out-of-the box experience for all your diffing needs.

    How is this different from nanomorph?

    This is a fork of the choojs project nanomorph, however we have a few differences. Events are determined no longer a hard-coded list, but are determined by a function you provide. We've also changed some of the logic to be less nuanced about namespaces. This shares most of the same test suite.

    This library seems cool, I'd like to build my own!

    tatermorph was optimized for simplicity, but different situations might require different tradeoffs. So in order to allow folks to build their own implementation we expose our test suite as a function you can call. So regardless if you're doing it to solve a problem, or just for fun: you can use the same tests we use for your own implementation. Yay! ✨


    tree = tatermorph(oldTree, newTree, getEvents)

    Diff a tree of HTML elements against another tree of HTML elements and create a patched result that can be applied on the DOM.

    ⚠️ tatermorph will modify the newTree and it should be discarded after use

    getEvents is a function which takes in a newNode and oldNode, and returns a list of events. It is an optional parameter, and can (in the similest case) return a hardcoded list of events you are watching for. In more complicated scenarios, you can query for events for both the new and old element.


    $ npm install tatermorph

    See Also

    Similar Packages

    Further Reading

    Original Authors

    Original License



    npm i tatermorph

    DownloadsWeekly Downloads






    Unpacked Size

    84 kB

    Total Files


    Last publish


    • avatar