awesome-virtual-dom

Modules & resources related to the virtual-dom module.

Modules

• virtual-dom – A JavaScript DOM model supporting element creation, diff computation and patch operations for efficient re-rendering

Loops

• virtual-raf – Create a requestAnimationFrame loop for virtual-dom
• main-loop – A rendering loop for diffable UIs

Hooks

• virtual-hook – virtual-dom hook constructor. Allows access to the constructed DOM Node, property names and values
• virtual-hyperscript-hook – Instead of adding hook/unhook lifecycle events on a per-property basis with a hook instance, this package lets you define simple hook and unhook properties as ordinary functions
• virtual-hyperscript-mount – Register mount/unmount lifecycle hooks for virtual-dom

Widgets

• virtual-widget – Create a virtual-dom widget

Building virtual-hyperscript

• hyperx – tagged template string virtual dom builder

Converting to and from virtual-dom

• vdom-parser
• vdom-to-html
• to-virtual-dom

Components

• sheet-router
• virtual-loading-dots
• virtual-markdown
• virtual-progress-bar
• virtual-sidebar
• virtual-streamgraph
• zip-input
• virtual-webtorrent - Webtorrent video element for virtual-dom

Frameworks / libraries that depend on virtual-dom

• cycle.js
• virtual-app
• mercury

Build tools

• hyperxify – browserify transform for hyperx
• jsx-virtual-hyperscript-loader – Webpack loader transpiling jsx into virtual-hyperscript javascript, using jsx-transform

Resources

Articles

• What is Virtual DOM?
• We Don't Need No Stinkin' Frameworks: Writing Web Apps with Bacon.js and virtual-dom

Talks

• Pocket-sized JS

Alternate Virtual DOM implementations

virtual-dom isn't the only module for diffing, patching, and creating elements. Here are some other projects that implement the Virtual DOM approach:

• basic-virtual-dom
• React
• Preact
• Deku
• Snabbdom

License

CC0 v1