matt-esch/virtual-dom

★ 11,848JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((virtual-dom))
    What it does
      Virtual DOM pattern
      Diff old and new trees
      Minimal DOM patch
    Core operations
      h() build VTree
      diff() compare trees
      patch() update DOM
    Use cases
      Efficient UI updates
      Learn React internals
      Declarative rendering
    Audience
      JavaScript developers
      Framework learners
    Inspired by
      React rendering

mindmap root((virtual-dom)) What it does Virtual DOM pattern Diff old and new trees Minimal DOM patch Core operations h() build VTree diff() compare trees patch() update DOM Use cases Efficient UI updates Learn React internals Declarative rendering Audience JavaScript developers Framework learners Inspired by React rendering

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Build a UI that re-renders efficiently without manually tracking which DOM elements changed between updates

USE CASE 2

Learn how React-style virtual DOM diffing works by studying a standalone, dependency-free implementation

USE CASE 3

Create a counter or to-do list app using the render-diff-patch cycle to keep the real DOM in sync with application state

USE CASE 4

Migrate a vanilla JS app that mutates the DOM directly to a declarative virtual DOM approach for cleaner update logic

Tech stack

JavaScript

Getting it running

Difficulty · easy Time to first run · 30min

In plain English

virtual-dom is a JavaScript library that implements the virtual DOM pattern for web applications. The idea behind it is straightforward: changing parts of a web page's DOM (the tree of elements the browser renders) is slow and error-prone when done manually. This library lets you describe what the page should look like as a plain JavaScript object tree, then automatically figures out the smallest set of real DOM changes needed to get there. The library has three core operations. First, you use a function called h (or the lower-level VNode objects directly) to build a virtual tree called a VTree, which describes the structure and properties of your UI. Second, when your data changes and you build a new VTree, the diff function compares the old tree to the new one and produces a compact list of changes. Third, the patch function takes that list and applies only those changes to the real DOM, leaving everything else untouched. This approach keeps rendering logic simple: you always describe the full desired state of the UI without tracking what changed since last time. The library handles the comparison and the minimal update. Input fields and scroll positions are not disturbed by changes that do not affect them, because unrelated parts of the DOM are left alone. The design was heavily inspired by the internal rendering approach used in Facebook's React framework, though it is a standalone module rather than part of any larger system. The virtual tree structure is designed to be efficient to build and read, avoiding the performance cost of working with actual DOM nodes until the patch step. The README includes a code example showing a counter that updates every second, demonstrating the full cycle of render, diff, and patch. Tool links at the bottom point to HTML-to-hyperscript converters that can help translate existing HTML into the hyperscript syntax the library uses.

Copy-paste prompts

Prompt 1

Build a to-do list app using virtual-dom with h(), diff(), and patch() that only updates the changed list items on each render

Prompt 2

Show me how virtual-dom's diff algorithm decides what changed between two VTree objects and what output it produces

Prompt 3

How do I handle a button click event in a virtual-dom app and trigger a re-render with the updated state?

Prompt 4

Migrate a vanilla JavaScript UI that directly mutates DOM nodes to use virtual-dom for efficient declarative updates

Prompt 5

What is the hyperscript h() function in virtual-dom and how do I use HTML-to-hyperscript converters to translate existing markup?

Open on GitHub → Explain another repo

← matt-esch on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.