Skip to content
tebe edited this page Oct 1, 2021 · 35 revisions

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?

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")]
}
  1. 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?

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.