FAQ

Common questions found on Gitter, Google Groups, and Stack Exchange
Contributors: Please link to gists, JSFiddles, etc. instead of providing longer code examples.

---

Where can I find help learning Mithril?

See the Mithril Community Page. We are all very friendly people!

How can I add animation to my Mithril app?

• Leo wrote an article on integrating velocity.js here.
• There are several community projects dealing with animation here.
• The Recipes and Snippets page has a few suggestions here.
• Animated Page Flip
• CSS translate

How do I fix this error: "Please ensure the DOM element exists before rendering a template into it."

Try putting the script tag for the offending JavaScript as the last thing inside the body tag or loading it on page load.

<!-- Option 1 -->
<div id="app"></div>
<script>
m.mount(document.getElementById("app"), App)
</script>

<!-- Option 2 -->
<script>
window.onload = function () {
  m.mount(document.getElementById("app"), App)
}

document.addEventListener("DOMReady", function () {
  m.mount(document.getElementById("app"), App)
})

// etc.
</script>
<div id="app"></div>

What is a top-most component?

A component that has no component ancestors (see Why doesn't my component render?).

Why doesn't my component render?

1. The component view function must return a virtual element, not an array of elements.

// This works
Component.view = function () {
  return m("div")
}

// This doesn't
Component.view = function () {
  return [m("div")]
}

2. Only a top-most component may return an array.

App.view = function () {
  return [m("div"), m("div")]
}

// This works
m.render(document.getElementById("body"), m.component(App))
m.render(document.getElementById("body"), m("div", [
  m.component(App)
]))

// This doesn't
m.render(document.getElementById("body"), {
  view: function () {
    return m.component(App)
  }
})

How do I (re)initialize all controllers in my app?

m.route(m.route())

How do I unmount/unload a component?

See Unloading a Component.

How do I make an m.route change without scrolling the page?

Call m.route in a setTimeout with duration 0. (This is a quirk of v0.2.0)

Why is my view redrawn on every key press?

• All on-events cause a redraw.
• oninput fires at each single character change in the field.
• onchange fires when the field is blurred, etc. (try this)
• See the MDN change event documentation

How do I define a catch-all route (404)?

m.route(body, '/', {
  '/': home,
  '/test': test,
  '/:...other': my404component
});

What's next for Mithril?

Check out #1090 for a curated list of what is being discussed/developed for future Mithril additions.