• Getting Started
• Resources
• Key concepts
• Social
• Misc

---

What is Mithril.js?

Mithril.js is a modern client-side JavaScript framework for building Single Page Applications. It’s small (< 10kb gzip), fast and provides routing and XHR utilities out of the box.

Mithril.js is used by companies like Vimeo and Nike, and open source platforms like Lichess.

If you are an experienced developer and want to know how Mithril.js compares to other frameworks, see the framework comparison page.

Mithril.js supports IE11, Firefox ESR, and the last two versions of Firefox, Edge, Safari, and Chrome. No polyfills required.

Looking for the v1 docs? Click here.

---

Getting started

An easy way to try out Mithril.js is to include it from a CDN and follow this tutorial. It’ll cover the majority of the API surface (including routing and XHR) but it’ll only take 10 minutes.

Let’s create an HTML file to follow along:

To make things simpler you can try out Mithril.js right here. This is a live playground with Mithril.js preloaded that – by the way – is also built in Mithril.

var root = document.body

// Your code here

m.mount(root, {
    view: function() {
        return m("h1", "Try me out")
    }
})

Click here to open the sample on flems.io

---

Hello world

Let’s start as small as we can: render some text on screen. Copy the code below into your file (and by copy, I mean type it out – you’ll learn better)

var root = document.body

m.render(root, "Hello world")

Now, let’s change the text to something else. Add this line of code under the previous one:

m.render(root, "My first app")

As you can see, you use the same code to both create and update HTML. Mithril.js automatically figures out the most efficient way of updating the text, rather than blindly recreating it from scratch.

Live Example

var root = document.body

m.render(root, "Hello World")

---

DOM elements

Let’s wrap our text in an

tag.

m.render(root, m("h1", "My first app"))

The m() function can be used to describe any HTML structure you want. So if you need to add a class to the

:

m("h1", {class: "title"}, "My first app")

If you want to have multiple elements:

[
    m("h1", {class: "title"}, "My first app"),
    m("button", "A button"),
]

And so on:

m("main", [
    m("h1", {class: "title"}, "My first app"),
    m("button", "A button"),
])

Live Example

var root = document.body

m.render(root, [
    m("main", [
        m("h1", {class: "title"}, "My first app"),
        m("button", "A button"),
    ])
])

Note: If you prefer syntax, it’s possible to use it via a Babel plugin.

// HTML syntax via Babel's JSX plugin

    
My first app
    A button

---

Components

A Mithril.js component is just an object with a view function. Here’s the code above as a component:

var Hello = {
    view: function() {
        return m("main", [
            m("h1", {class: "title"}, "My first app"),
            m("button", "A button"),
        ])
    }
}

To activate the component, we use m.mount.

m.mount(root, Hello)

As you would expect, doing so creates this markup:

    
My first app
    A button

The m.mount function is similar to m.render, but instead of rendering some HTML only once, it activates Mithril.js’ auto-redrawing system. To understand what that means, let’s add some event