An easy-to-use Virtual DOM built for the web!


A unique concept to diffHTML, these transitions are activated as first class events whenever elements are added, removed, changed, and when attributes or text have changed.

By returning promises you can halt rendering until they have completed. This could allow you to easily build keyframe based animations or integrate tools like anime.js that support Promises.


There are many states you can listen to, they get added globally and allow you to do filtering. You add them using the addTransitionState method.

import { addTransitionState } from 'diffhtml';


This triggers whenever an element gets added into the DOM. Text and comment nodes are not included.

addTransitionState('attached', (element) => {


For when an element leaves the DOM.

addTransitionState('detached', (element) => {


Whenever two elements are replaced at render time this is called with the old and new elements.

addTransitionState('replaced', (oldElement, newElement) => {
  console.log(oldElement, newElement);

Attribute changed

For when attributes have changed.

addTransitionState('attributeChanged', (element, attrName, oldValue, newValue) => {
  console.log(element, attrName, oldValue, newValue);

Text changed

For when text has changed in either TextNodes or SVG text elements.

addTransitionState('textChanged', (element, oldValue, newValue) => {
  console.log(element, oldValue, newValue);

Edit on GitHub