What is Million.js?

Million is an extremely fast and lightweight (<4kb) virtual DOM that makes React (opens in a new tab) up to 70% faster (opens in a new tab).

Oh man... Another /virtual dom|javascript/gi (opens in a new tab) library? I'm fine with React (opens in a new tab) already, why do I need this?

Million makes creating user interfaces as easy (It's just React (opens in a new tab)!), but with faster rendering and loading speeds. By using a fine-tuned, optimized virtual DOM, Million.js reduces the overhead of the React Reconciler.

Furthermore, while alternative libraries like Preact (opens in a new tab) reduce bundle sizes via efficient code design, Million.js can be used inside React (opens in a new tab) and is much faster than Preact.

Get Started

React vs. Million.js

The following example is a simple counter app that uses React and Million.js. The code is identical, but the performance is different.

Alternatively, view on another tab: demo.millionjs.org (opens in a new tab)

What is a virtual DOM?

A virtual DOM a concept that allows you to create user interfaces declaratively, without having to directly manipulate the DOM. Instead, you create a virtual representation of the DOM, and the virtual DOM library will take care of updating the actual DOM for you.

The virtual DOM is used by many popular libraries, including React (opens in a new tab), Preact (opens in a new tab), and Vue (opens in a new tab). However, it suffers from performance overhead (opens in a new tab), often making it impractical for highly interactive runtime applications.

Design Principles

Million.js is designed in order to solve the performance issues of the virtual DOM by accomplishing a balance between being fast and compact and easy to use.

• Maximize composability and decouple modules
  Million has a highly decoupled API, with modules for additional features opt-in. This allows you to explicitly define the amount of JavaScript you want to ship, while allowing your Virtual DOM to scale.

  
  

• Block-based virtual DOM strategy
  Million uses a block-based virtual DOM (pioneered by Géry Debongnie in blockdom (opens in a new tab)) that allows for a more efficient reconciliation algorithm. This allows Million.js to be faster than React, while being smaller than Preact. You can view the methodology and findings with blockdom performance notes (opens in a new tab).

  
  

• Ability to "initialize" virtual DOM blocks
  Million.js allows you to "initialize" and reuse virtual DOM blocks. With blocks that can be used in multiple places, the memory and performance cost of the virtual DOM is reduced.

  
  

But most importantly—Million.js is a underlying runtime for virtual DOM based frameworks. The long-term goal is to serve as a faithful partner to existing frameworks, allowing them to be faster and more lightweight without opting into a signals (opens in a new tab) data solution.

You can track our progress through our Roadmap (opens in a new tab).

Acknowledgements

• blockdom (opens in a new tab) (Géry Debongnie (opens in a new tab)) Thank you to Géry pioneering the concept of "blocks" in the virtual DOM. Many parts of the Million.js codebase either directly or indirectly derive from his work.

• voby (opens in a new tab) (Fabio Spampinato (opens in a new tab)) The Million.js "template" concept is derived from Voby's template() API.

• bun (opens in a new tab) for their homepage. The Million.js homepage is a remix of what they have currently.

• ivi (opens in a new tab), Preact (opens in a new tab), and more (opens in a new tab)