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:

html

<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

bash

$ npm install mithril

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

bash

$ 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:

bash

# 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.

bash

$ npm init --yes

Install required tools.

bash

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

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

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.

json

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

Create index.js file.

javascript

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

Create index.html file.

html

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

Run your bundler script.

bash

$ npm run start

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

Installation ​

CDN and online playground ​

npm ​

Create a project locally ​

Quick start with esbuild ​

Installation

CDN and online playground

npm

Create a project locally

Quick start with esbuild