Skip to content
Mithril.js 2
Main Navigation GuideAPI

English

简体中文
繁體中文
Español
Français
Русский
Português – Brasil
Deutsch
日本語
한국어
Italiano
Polski
Türkçe
čeština
magyar

English

简体中文
繁體中文
Español
Français
Русский
Português – Brasil
Deutsch
日本語
한국어
Italiano
Polski
Türkçe
čeština
magyar

Appearance

Sidebar Navigation

Getting Started

Installation

Tutorial

Resources

JSX

ES6+ on legacy browsers

Animation

Testing

Examples

3rd Party Integration

Path Handling

Key concepts

Vnodes

Components

Lifecycle methods

Keys

Autoredraw system

Misc

Framework comparison

Migrating from v1.x

Migrating from v0.2.x

API

On this page

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

  • mithril-vite-starter
  • mithril-esbuild-starter
  • mithril-rollup-starter

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.

  1. Initialize the directory as an npm package.
bash
$ npm init --yes
  1. Install required tools.
bash
$ npm install mithril
$ npm install esbuild --save-dev
  1. 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"
      }
    }
  2. Create index.js file.

javascript
import m from 'mithril';
m.render(document.getElementById('app'), 'hello world');
  1. Create index.html file.
html
<!DOCTYPE html>
<body>
  <div id="app"></div>
  <script src="bin/main.js"></script>
</body>
  1. Run your bundler script.
bash
$ npm run start
  1. Open index.html in a browser. You should see hello world rendered on your page.
Pager
Next pageTutorial

Released under the MIT License.

Copyright (c) 2024 Mithril Contributors

https://mithril.js.org/installation.html

Released under the MIT License.

Copyright (c) 2024 Mithril Contributors