Skip to content
Get packs

virtual-dom

A JavaScript library for describing a web page as data and efficiently updating the real DOM.

GitHub Download source
Stars
11.8k
Forks
764
Licence
MIT
Language
JavaScript
Last update
3.8 years ago
Type
Library

No commits in over a year — check for forks or alternatives before adopting.

What it is

virtual-dom is a JavaScript library that lets you describe what a page should look like as a lightweight tree of plain JavaScript objects, called a VTree. When your app state changes, you build a new tree, and the library compares it with the previous one (diffing) and updates only the parts of the real browser DOM that changed (patching). This avoids manually tracking and editing DOM nodes. It was inspired by React's internals.

  • Re-render a counter or widget by generating a new tree on each state change, as in the README example
  • Build a view layer where the app code only describes the desired DOM and the library applies minimal changes
  • Convert HTML snippets to hyperscript code using the tools the README links to

Great for

  • JavaScript developers building their own rendering layer for a web app
  • Developers who want to learn how virtual DOM diffing and patching work
  • Projects that need a small, declarative rendering core without a full framework
  • Maintainers of existing code that already uses the virtual-dom or virtual-hyperscript APIs

Not ideal for

  • Beginners looking for a complete front-end framework: it only handles rendering and provides no routing, state management or components, per the README
  • Teams wanting a actively maintained, production-proven choice: the README labels the project 'experimental' and the last push shown is January 2023
  • Projects that want a modern, widely supported ecosystem: the README does not describe current framework integrations
Step-by-step guide: how to use virtual-domInstall, first run, examples, tips and FAQs
virtual-dom alternativesReact vs virtual-domPreact vs virtual-domSnabbdom vs virtual-dom

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js (version not stated in the README)

    Clone the repository

    git clone https://github.com/Matt-Esch/virtual-dom
  2. 2

    Run it

    • Install the package or clone the repository, as the README does not show an npm install command in the truncated text
    • Require h, diff, patch and create-element from the virtual-dom package
    • Write a render function that returns an h(...) tree for your state
    • Create the initial DOM node with createElement and append it to the document
    • On each update, call diff with the old and new trees, then patch the root node
  3. 3

    Get the most out of it

    • Use virtual-hyperscript (h) with selector syntax like '.greeting' for terser trees, as shown in the DOM model section
    • Read the vdom and vtree sub-READMEs linked from the documentation section for per-module details
    • Use the html2hscript tools listed in the README to convert existing HTML markup
    • Consult the docs.jsig type signature file mentioned in the README for module types

Downloads

Source code (.zip)master branch · straight from GitHub

Strengths

  • Declarative: you describe the desired DOM and the library works out the changes
  • Diffing and patching avoid recreating the whole DOM, which the README says helps keep input focus and performance
  • Modular: separate functions for element creation, diff and patch, documented in the README

Trade-offs

  • The README marks the project as experimental and the documentation is spread across sub-READMEs
  • Requires you to write your own state handling and wiring; it does not provide components or a router
  • The README's last shown activity is from 2023, so compatibility with current tooling is unclear

How it compares

ProjectStarsTypeLevelUpdatedBest for
virtual-dom (this)11.8kLibraryintermediate3.8 years agoJavaScript developers building their own rendering layer for a web app
react252kLibraryintermediate6 days agoDevelopers building interactive web interfaces with JavaScript
preact39kLibraryintermediate4 days agoWeb developers who already know React and want a lighter library
snabbdom12.4kLibraryintermediate5 months agoDevelopers building interactive web interfaces who want a small, low-level rendering library
inferno16.5kLibraryintermediate6 days agoDevelopers already familiar with React who want a React-like API

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.