natemoo-re / micromorph

A very tiny library for diffing DOM nodes

🤏 micromorph

A very tiny library for diffing live DOM nodes.

Extremely handy when used in conjunction with the DOMParser API.

---

Use Cases

Want to update one node to match another?

Diff them efficiently and only sync changes between the two nodes.

import diff from 'micromorph';

diff(fromNode, toNode);

Want to update the current document to match a new document, maybe from a string?

Micromorph is smart enough to handle full document diffing while avoiding FOUC.

import diff from 'micromorph';
const p = new DOMParser();

const newDoc = p.parseFromString(`<h1>Hello world!</h1>`, 'text/html');

diff(document, newDoc);

Want to turn your MPA into an SPA?

With the /nav entrypoint, Micromorph automatically converts your MPA into a SPA while only re-rendering content that has changed.

import listen from 'micromorph/nav';

listen();

For browsers that don't support the Navigation API, the /spa entrypoint can be used.

import listen from 'micromorph/spa';

listen();