/million

The Virtual DOM Replacement for React (up to 7️⃣0️⃣% faster!)

Primary LanguageTypeScriptMIT LicenseMIT

Million Banner
CI NPM Version NPM Downloads
📚 Read the docs 🎦 Watch video 💬 Join our Discord 🌐 Follow on Twitter

What is Million?

Million is an extremely fast and lightweight (<4kb) virtual DOM that makes React components up to 70% faster.

Oh man... Another /virtual dom|javascript/gi framework? I'm fine with React already, why do I need this?

Million works with React. Million makes creating web apps just as easy (It's just wrapping a React component!), but with faster rendering and loading speeds. By using a fine-tuned, optimized virtual DOM, Million.js reduces the overhead of React (try it out here)

TL;DR: Imagine React components running at the speed of raw JavaScript.

📚 Learn Million in <5 minutes! →

Installing Million

Inside your project directory, run the following command:

npm install million

Example Usage

Million.js operates off of the concept of "blocks". Imagine blocks as special Higher Order Components (HOCs) that you use in your React application, but are rendered using the Million.js virtual DOM.

In order to create blocks from your components, all you'll need to is wrap your components in a block() function. Below is an example of a React "counter" component that's been wrapped with Million.js.

import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { block } from 'million/react';

function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);
  const handleClick = () => {
    setCount(count + 1);
  };

  return <button onClick={handleClick}>{count}</button>;
}

// Just wrap Counter in a block() function!
const CounterBlock = block(Counter);

createRoot(document.getElementById('root')).render(<CounterBlock />);

→ Try the quickstart

Codebase

This repo is a "mono-repo" with modules. Million ships as one NPM package, but has first class modules for more complex, but important extensions. Each module has its own folder in the /packages directory.

You can also track our progress through our Roadmap.

Module Description
million The main Virtual DOM with all of Million's core.
react A module that gives React compatibility for Million.
compiler The compiler for Million in React.
jsx-runtime A simple JSX runtime for Million core.

Resources & Contributing Back

Looking for the docs? Check the documentation or the Contributing Guide out.

Want to talk to the community? Hop in our Discord and share your ideas and what you've build with Million.

Find a bug? Head over to our issue tracker and we'll do our best to help. We love pull requests, too!

We expect all Million contributors to abide by the terms of our Code of Conduct.

→ Start contributing on GitHub

Sponsors

Acknowledgments

Million takes heavy inspiration from the following projects:

  • blockdom (Géry Debongnie) 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 (Fabio Spampinato) The Million.js "template" concept is derived from Voby's template() API.
  • bun for their homepage. The Million.js homepage is a remix of what they have currently.
  • ivi, Preact, and more

Million is being used at companies like Wyze and Dimension, as well as open source work like Quartz, TinyPages, and more.

License

Million is MIT-licensed open-source software by Aiden Bai and contributors:


View count