Preact vs virtual-dom
Which should you use? A side-by-side look at what each one does, who it suits, what it costs, how hard it is to set up, and where each falls short.
Open source · MIT
A small (about 4kB) React-style library for building user interfaces in JavaScript.
Open source · MIT
A JavaScript library for describing a web page as data and efficiently updating the real DOM.
The short answer
Choose Preact if you need…
- Web developers who already know React and want a lighter library
- Projects where small bundle size matters, such as pages loaded over slow connections
- Teams that want an optional compatibility alias (preact/compat) to reuse React-based code
- Developers building apps that need server-side rendering with hydration
Choose virtual-dom if you need…
- 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
Side-by-side
| Preact | virtual-dom | |
|---|---|---|
| Type | Library | Library |
| Price | Free and open source | Free and open source |
| Licence | MIT | MIT |
| GitHub stars | 39k | 11.8k |
| Setup difficulty | Intermediate | Intermediate |
| How you get it | Install with a package manager | Install with a package manager |
| Main language | JavaScript | JavaScript |
| Last code update | 4 days ago | 4 years ago |
What each one is
Preact
Preact is a JavaScript library for building user interfaces out of reusable components, using an API that closely follows React. The README describes it as a fast, roughly 4kB alternative to React with a similar modern API, covering components, hooks, JSX, and a virtual DOM. Developers use it when they want React-style code with a much smaller download size.
virtual-dom
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.
Best for
Preact
- Web developers who already know React and want a lighter library
- Projects where small bundle size matters, such as pages loaded over slow connections
- Teams that want an optional compatibility alias (preact/compat) to reuse React-based code
- Developers building apps that need server-side rendering with hydration
virtual-dom
- 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
Strengths
Preact
- Very small size (the README states about 4kB), which helps page load time
- Familiar React API, including class components, hooks, and functional components
- MIT licensed with a large community and many stars on GitHub
virtual-dom
- 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
Not ideal for
Preact
- Complete beginners who have never written JavaScript; the README assumes familiarity with components and modern JS syntax
- Projects that depend on React-only libraries without testing compatibility, since the README only describes compatibility as 'extensive' via an alias and does not list limits
- Native mobile app development, which the README does not mention
virtual-dom
- 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
Trade-offs
Preact
- The README is truncated and gives limited detail on edge-case React compatibility
- Some React ecosystem libraries may need the compat layer or may not work fully
- Tooling such as DevTools and HMR depends on additional setup that the README only briefly mentions
virtual-dom
- 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
Getting started
virtual-dom
Clone the repository
git clone https://github.com/Matt-Esch/virtual-domFrequently asked questions
What is the difference between Preact and virtual-dom?
Preact: A small (about 4kB) React-style library for building user interfaces in JavaScript. virtual-dom: A JavaScript library for describing a web page as data and efficiently updating the real DOM. Preact suits web developers who already know react and want a lighter library, while virtual-dom suits javascript developers building their own rendering layer for a web app.
Are Preact and virtual-dom free?
Preact: Free and open source. virtual-dom: Free and open source.
Is Preact or virtual-dom more popular?
Preact has more GitHub stars (39k) than virtual-dom (11.8k). Popularity isn't the same as fit — check which one matches your use case above.
What are other alternatives to Preact and virtual-dom?
Other options people compare them with include React, Inferno, Million.js, Mithril, MDX.
Keep comparing
Built from our catalogue entries for both products: open-source details come from each project's README (AI-assisted, refreshed weekly) and GitHub data; AI-tool details are editorial. Spotted something wrong? Let us know from either product's page.