Guide · Open source
How to use snabbdom: install, build a view and patch updates
Updated · written with AI from the project's own documentation and checked against our catalogue data
Snabbdom is a small JavaScript library that manages a virtual DOM, an in-memory description of what a page should look like. When your state changes, it compares the new description with the old one and updates only the parts of the real page that changed. This guide shows you how to set it up, create views with the h function, patch updates and add optional modules so you can build interactive interfaces with it.
Snabbdomsnabbdom/snabbdom · ★ 12.4k · MIT Install options & downloads Quick start
- 1Check prerequisites. Install Node.js. The README does not state a required version, so use a current LTS release and check the project docs.
- 2Add Snabbdom to your project. Install the snabbdom package with your package manager, or clone the repository as the README describes.
- 3Choose your modules. Import only the modules you need, such as classModule, propsModule, styleModule or eventListenersModule.
- 4Create a patch function. Call init with your chosen modules to get a patch function.
- 5Build a vnode with h. Describe your view using h with a selector, a data object and children.
- 6Patch the initial view. Call patch with a DOM element and your vnode, then keep the returned vnode.
- 7Patch updates. Create a new vnode for the new state and call patch with the old vnode and the new one.
What Snabbdom is and who it suits
Snabbdom's core is intentionally small, about 200 SLOC according to the README, and extra features such as classes, styles, properties and event listeners are added through optional modules. This makes it a good fit if you want a low-level rendering library and prefer to pick only the modules you need rather than adopt a full framework.
It is less suited to beginners looking for routing, state management and tooling included, because the README describes Snabbdom as a focused library. Projects that need a large built-in ecosystem of components may also find it limited, since the README lists mainly a few third-party packages.
Install Snabbdom with a package manager
Snabbdom is distributed as a package on npm, and the project is written in TypeScript. The README lists Node.js as a prerequisite but does not specify a version, so check the project's own documentation for the version you need.
The README's install instruction is to clone the repository, which you can do with the command below. For application code, use the snabbdom package in your own project's dependencies.
git clone https://github.com/snabbdom/snabbdomCreate a patch function with modules
The core exposes one function, init. It takes a list of modules and returns a patch function that uses exactly that set of modules. Import only the modules you need, which keeps your choices explicit.
The README's example uses classModule for toggling classes, propsModule for DOM properties, styleModule for styling and animations, and eventListenersModule for attaching listeners.
- classModule: toggles classes
- propsModule: sets properties on DOM elements
- styleModule: handles styling with support for animations
- eventListenersModule: attaches event listeners
import { init, classModule, propsModule, styleModule, eventListenersModule, h } from "snabbdom";
const patch = init([classModule, propsModule, styleModule, eventListenersModule]);Build a view with h and patch it into the page
The README recommends using h to create virtual DOM nodes. It accepts a tag or selector string, an optional data object, and an optional string or array of children. Selectors can include an id and classes, such as div#container.two.classes.
The first call to patch takes a DOM element with a parent and replaces it with the DOM node built from your vnode. Keep the returned vnode, because the next update needs it.
const container = document.getElementById("container");
const vnode = h("div#container.two.classes", { on: { click: () => console.log("div clicked") } }, [
h("span", { style: { fontWeight: "bold" } }, "This is bold"),
" and this is just normal text",
h("a", { props: { href: "/foo" } }, "I'll take you places!")
]);
patch(container, vnode);Update the view with a second patch
To update the page, build a new vnode describing the new state and pass the old vnode and the new vnode to patch. Snabbdom modifies the old view to match the new description rather than rebuilding it.
The README requires that any old vnode you pass must be the result of a previous call to patch, because Snabbdom stores information in the vnode. Passing a vnode created some other way will not work as intended.
const newVnode = h("div#container.two.classes", { on: { click: () => console.log("updated div clicked") } }, [
h("span", { style: { fontWeight: "normal", fontStyle: "italic" } }, "This is now italic type"),
" and this is still just normal text",
h("a", { props: { href: "/bar" } }, "I'll take you places!")
]);
patch(vnode, newVnode);Learn the hooks and module system
Hooks let you attach behaviour to parts of the diff and patch process, both per vnode and globally for modules. The README documents hooks named init, insert, remove and destroy, and explains how to write your own modules under Creating modules.
Thunks are available to optimise the diff and patch process further, and JSX support includes TypeScript types. Check the README sections on these features before relying on them, since the excerpt here does not show their full usage.
- init: runs when a vnode is initialised
- insert: runs when a vnode is inserted into the DOM
- remove: runs when a vnode is removed
- destroy: runs when a vnode is destroyed
What people use it for
- Building interactive widgets where you update only changed parts of the page
- Adding class toggling, styling and event listeners through optional modules
- Animating reordering of elements, as shown in the README's animated reordering example
- Integrating rendering with functional or reactive (FRP) code through its reduce-like patch signature
- Creating SVG views using the h helper
Frequently asked questions
Is Snabbdom free to use?
Yes. The repository is licensed under the MIT licence, as shown in the README badge. Check the LICENSE file in the repository for the full terms.
What do I need to run Snabbdom?
The README lists Node.js as a prerequisite but does not specify a version. Install it with your package manager and check the project docs for version details.
How do I install Snabbdom?
The README's install instruction is to clone the repository with git clone https://github.com/snabbdom/snabbdom. Application code can use the snabbdom package from npm, as the README's npm badge indicates.
How is Snabbdom different from a full framework?
According to the README, Snabbdom is a focused library with a small core, and features are added through modules. It does not include routing, state management or tooling, so you add those yourself.
What are good alternatives to Snabbdom?
Projects listed as comparable are Inferno, Preact and Mithril. Compare them against your needs for size, modules and ecosystem before choosing.
Why do I need to pass the old vnode to patch?
The README explains that Snabbdom stores information in the vnode, so the old vnode must be the result of a previous call to patch. Passing a vnode from elsewhere can cause incorrect updates.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Snabbdom suits developers who want a small, readable virtual DOM core and prefer to choose their own modules. Beginners who want routing, state management and tooling included, or teams that need a large component ecosystem, should pick a fuller framework or one of the comparable projects.
Install options & downloads