Hundred is intended to be the most lightweight (<1kb
) virtual DOM implementation, and is a proof-of-concept and a learning resource more than a tool you should actually use in production.
Additionally, just because Hundred is lightweight doesn't mean it's performant by any means. It is faster and smaller than simple-virtual-dom
, but ranks behind production-ready Virtual DOM libraries.
If you're looking for something a bit more comprehensive, check out Million — Virtual DOM into the future! 💥🦁✨
If you're interested in tuning into the development and future of Million, please leave a ★ :)
-Aiden (@aidenybai)
Inside your project directory, run the following command:
npm install hundred
import { h, createElement, patch } from 'hundred';
const el = createElement(h('div'));
patch(el, h('div', null, 'Hello World!'), h('div'));
patch()
function has a standard interface that is used in many Virtual DOM libraries. First argument is a DOM node that will be used as the live DOM reference, and the second one is a Virtual DOM to render.
h()
function will instantiate a "Virtual DOM" node for an element.
hundred
is MIT-licensed open-source software by Aiden Bai.