🤏 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();