Installation

CDN and online playground

If you're new to JavaScript or just want a very simple setup to get your feet wet, you can get Mithril.js from a CDN:

<script src="https://unpkg.com/mithril/mithril.js"></script>

If you would like to try out Mithril.js without setting up a local environment, you can easily use an online playground at flems.io/mithril.

npm

$ npm install mithril

TypeScript type definitions are available from DefinitelyTyped. They can be installed with:

$ npm install @types/mithril --save-dev

Create a project locally

You can use one of several existing Mithril.js starter templates such as

For example, if you'd like to get started with mithril-esbuild-starter, run the following commands:

# Clone the the template to a directory of your choice
npx degit kevinfiol/mithril-esbuild-starter hello-world

# Navigate to newly scaffolded project
cd ./hello-world/

# Install dependencies
npm install

# Build the app and watch for changes
npm run dev

Quick start with esbuild

esbuild documentation can be found here.

Initialize the directory as an npm package.

$ npm init --yes

Install required tools.

$ npm install mithril
$ npm install esbuild --save-dev

Add a "start" entry to the scripts section in package.json.

{
    "...": "...",
    "scripts": {
        "start": "esbuild index.js --bundle --outfile=bin/main.js --watch"
    }
}

Optionally, if you'd like to use JSX, you can use the --jsx-factory and --jsx-fragment flags with esbuild.

{
    "...": "...",
    "scripts": {
        "start": "esbuild index.js --bundle --outfile=bin/main.js --jsx-factory=m --jsx-fragment='\"[\"' --watch"
    }
}

Create index.js file.

import m from "mithril";
m.render(document.getElementById("app"), "hello world");

Create index.html file.

<!DOCTYPE html>
<body>
	<div id="app"></div>
	<script src="bin/main.js"></script>
</body>

Run your bundler script.

$ npm run start

Open index.html in a browser. You should see hello world rendered on your page.