Simple visual DOM implementation

Usage no npm install needed!

<script type="module">
  import easydom from 'https://cdn.skypack.dev/easydom';



Build Status Coverage Status npm version npm downloads

A simple virtual DOM implementation, include create vnode, diff and patch.

Preview Online: https://wangchi.github.io/easydom/

English | 中文文档


Easydom include the following methods:

  • createElement create a virtual dom tree
  • createDOM parse virtual dom to HTML elements
  • render append HTML elements to page or target element
  • diff diff the differents between old VNode tree and new VNode tree, and return differents as patches
  • patch update the patches to HTML elements

About diff types:

  • INSERT insert elements
  • REMOVE remove elements
  • REPLACE replace elements
  • ORDER record the order of child nodes, then replace or move
  • PROPS update attributes
  • TEXT replace text content


Install easydom

npm i easydom --save


import easydom from 'easydom';

// use @babel/plugin-transform-react-jsx to parse jsx
let vtree = (
  <div id="box">
    <p className="message" style={{ color: '#36f' }}>
      hello walker
    <ul className="lists">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>

// compile vnode to HTML elements
let rootNode = easydom.createDOM(vtree);

// append the elements to page
easydom.render(rootNode, document.getElementById('app'));

Create a new vtree, then update the patches to HTML elements.

let newVtree = (
  <div id="box" className="new-box">
    <h1 id="title">This is title</h1>
    <p style={{ color: '#f80' }}>hello walker, nick to meet you</p>
    <ul className="lists new-lists">
      <li>Item 1</li>
      <li>Item 4</li>

// diff
let patches = easydom.diff(vtree, newVtree);

console.log('patches: ', patches);

// update the patches to HTML elements
easydom.patch(rootNode, patches);


MIT License