API Methods

One of the best things about Mithril.js is that it has a very small footprint. And most of the time not even all methods are needed. Therefore, the number of API methods is really manageable.

Often used in a project:

Rarely or never used in a project:

This means, you only have to know five API methods to build your brilliant SPA application. 👌

m(selector, attributes, children)

Hyperscript function that represents an HTML element in a Mithril.js view.

m("div.class#id", {title: "title"}, ["children"])

m.render(element, vnodes)

Renders a template to the DOM.

m.render(document.body, "hello")
// <body>hello</body>

Show examples using ”m.render”

m.mount(element, component)

Activates a component, enabling it to autoredraw on user events.

var state = {
  count: 0,
  inc: function() {state.count++}

var Counter = {
  view: function() {
    return m("div", {onclick: state.inc}, state.count)
m.mount(document.body, Counter)

Show examples using ”m.mount”

m.route(root, defaultRoute, routes)

Navigate between "pages" within an application.

var Home = {
  view: function() {
    return "Welcome"

m.route(document.body, "/home", {
  "/home": Home, // defines `https://localhost/#!/home`

Show examples using ”m.route”


Redirects to a matching route.



Returns the last fully resolved routing path, without the prefix.

var currentRoute = m.route.get()


Defines a router prefix. Must be set before invoking m.route().

m.route.prefix = "#!"

Creates a dynamic routable link.

m(m.route.Link, {href: "/Home"}, "Go to home page")


Retrieves a route parameter from the last fully resolved route.

value = m.route.param(key)


A special value that can be returned from a route resolver's onmatch to skip to the next route.


Makes XHR (aka AJAX) requests, and returns a promise.

  method: "PUT",
  url: "/api/v1/users/:id",
  params: {id: 1, name: "test"}
.then(function(result) {

Show examples using ”m.request”


Makes JSON-P requests.

  url: "/api/v1/users/:id",
  params: {id: 1},
  callbackKey: "callback",
.then(function(result) {


Turns a string of the form ?a=1&b=2 to an object.

var object = m.parseQueryString("a=1&b=2")
// {a: "1", b: "2"}


Turns an object into a string of form a=1&b=2.

var querystring = m.buildQueryString({a: "1", b: "2"})
// "a=1&b=2"


Turns a path template and a parameters object into a string of form /path/user?a=1&b=2.

var querystring = m.buildPathname("/path/:id", {id: "user", a: "1", b: "2"})
// "/path/user?a=1&b=2"


Turns a string of the form /path/user?a=1&b=2 to an object.

var object = m.parsePathname("/path/user?a=1&b=2")
// {path: "/path/user", params: {a: "1", b: "2"}}


Turns an HTML or SVG string into unescaped HTML or SVG.

m.render(document.body, m.trust("<h1>Hello</h1>"))

Show examples using ”m.trust”

m.fragment(attrs, children)

Allows attaching lifecycle methods to a fragment vnode

var groupVisible = true
var log = function() {
  console.log("group is now visible")

m("ul", [
  m("li", "child 1"),
  m("li", "child 2"),
  groupVisible ? m.fragment({oninit: log}, [
    // a fragment containing two elements
    m("li", "child 3"),
    m("li", "child 4"),
  ]) : null


Updates the DOM after a change in the application data layer.

var count = 0
function inc() {
  setInterval(function() {
  }, 1000)

var Counter = {
  oninit: inc,
  view: function() {
    return m("div", count)

m.mount(document.body, Counter)

Show examples using ”m.redraw”

For more information see official website