Install Million.js

Million.js assumes that you've already initialized a React project. If you haven't, we recommend checking out react.dev (opens in a new tab) first.

If you're just looking to try out Million.js, check out the quickstart.

Install package

First things first, you'll need to install Million.js. You can do this with your favorite package manager:

npm install million

Use the compiler

Then, add the compiler to your build tool of choice:

React Instructions

Million.js is supported within the /app ("use client" components only) and /pages

next.config.mjs

import million from 'million/compiler';
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};
 
export default million.next(nextConfig);

Preact Instructions

Note that instead of importing from million/react in your application code, you'll need to import from million/preact instead.

astro.config.mjs

import { defineConfig } from 'astro/config';
import million from 'million/compiler';
 
export default defineConfig({
  vite: {
    plugins: [million.vite({ mode: 'preact', server: true })]
  }
});

Customizing the config

Here some of the options you can pass to the compiler:

interface Options {
  mode: 'react' | 'preact' | 'vdom' // default: 'react'
  optimize: boolean // default: false
  server: boolean // default: false
}

Using the experimental Optimizer

⚠️

This is a highly experimental feature. It's not recommended to use this in production.

You can enable the experimental optimizer by passing optimize: true to the compiler options. This will allow the server to attempt to statically analyze blocks beforehand for a zero initialization cost.

You can also add a leading comment of /* @optimize */ to any block to opt-in to optimization on a component-by-component basis.

const AppBlock = /* @optimize */ block(App);

Quick Start Rules of Blocks