Million is a lightweight (<1kb) Virtual DOM. It's really fast and makes it easy to create user interfaces.
Oh man... Another
/virtual dom|javascript/gimlibrary? I'm fine with React already, why should I bother switching?
Million makes creating user interfaces as easy as React, but with faster performance and smaller bundle size for the end user. By computing the user interface beforehand with a compiler, Million reduces the overhead of traditional Virtual DOM.
Okay cool... but why should I use Million if I can just use Preact if I need something a bit more lightweight?
While alternative libraries like Preact reduce bundle sizes by efficient code design, Million takes it a step further by leveraging compilation to make a quantum leap in improving bundle size and render speed.
Think of it as if React's API and Svelte's compiler had a baby. A baby with super speed! 👶
|
🚧 Million now supports experimental React compatability.
Inside your project directory, run the following command:
npm install millionHere is an extremely simple implementation of a Counter app using Million.
import { compat, createRoot, useState } from 'million/react';
function Counter({ init }) {
const [value, setValue] = useState(init);
return (
<div>
<div>Counter: {value}</div>
<button onClick={() => setValue(value + 1)}>Increment</button>
<button onClick={() => setValue(value - 1)}>Decrement</button>
</div>
);
}
const root = createRoot(document.querySelector('#app'));
// Million wraps render functions inside a compat function
compat(() => {
root.render(<Counter init={0} />);
});Here, you can write React code. Million will automagically optimize it during compile time, allowing for a super speedy Virtual DOM.
Open the project to start tinkering:
Need help on using React? Check out the React documentation.
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 /src directory.
| Module | Description |
|---|---|
| million | The main Virtual DOM with all of Million's core |
| react | Adds basic React compatability to Million |
| router | Router that turns MPA to SPA |
| jsx-runtime | Utility functions for JSX |
| html | Provides factory functions and tagged template for easier virtual node creation without the need for a preprocessor |
| morph | Utility for morphing HTML with just DOM nodes (like morphdom) inside the page. Works great for implementing hot refresh in SSR frameworks |
| utils | Conversion utilities between VNode, DOMNode, and string |
| vite-plugin-million | A Vite plugin that optimizes the user interface ("the compiler") |
Looking for the docs? Check the documentation out.
Want to talk to the community? Hop in our Discord and share your ideas and what you've build with Million.
Have a question about Million? Post it on the Discord or GitHub Discussions and ask the community for help.
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 (pnpm welcome)
Million takes heavy inspiration from snabbdom, ivi, mikado, and more. Feel free to check them out if you're interested in an alternative library to use.
Million is being used in open source work like Quartz, TinyPages, and more.
|
|
|
Want your logo here? → Sponsor Million
Million is MIT-licensed open-source software and research project by Aiden Bai.