Morphlex is a ~2.2KB (gzipped) DOM morphing library that transforms one DOM tree to match another while preserving element state and making minimal changes.

Installation#

npm install morphlex

Or use it directly from a CDN:

<script type="module">
  import { morph } from "https://www.unpkg.com/morphlex@0.0.19/dist/morphlex.min.js"
</script>

Usage#

import { morph, morphInner } from "morphlex"

// Morph the entire element
morph(currentNode, referenceNode)

// Morph only the children of the current node
morphInner(currentNode, referenceNode)

What makes Morphlex different?#

1. No cascading mutations from inserts. Simple inserts should be one DOM operation.
2. No cascading mutations from removes. Simple removes should be one DOM operation.
3. No cascading mutations from partial sorts. Morphlex finds the longest increasing subsequence for near optimal partial sorts.
4. It uses moveBefore when available, preserving state.
5. It uses isEqualNode, but in a way that is sensitive to the value of form inputs.
6. It uses id sets inspired by Idiomorph.