Mithril: A Tiny MVC Framework

Alex R. Young





frameworks libraries modules mvc

Mithril: A Tiny MVC Framework

Posted by Alex R. Young on .

frameworks libraries modules mvc

Mithril: A Tiny MVC Framework

Posted by Alex R. Young on .

Stephan Hoyer sent me an MVC framework called Mithril (GitHub: lhorie/mithril.js, License: MIT, npm: mithril) that's getting a lot of positive feedback due to its small size and great documentation.

Mithril was created by Leo Horie, and it provides models, views, controllers, and the benefits that a virtual DOM brings. It also has a routing layer that is used for manipulating the browser's URL.

What makes Mithril cool is the choices Leo has made: many MVC frameworks provide features that I don't need, but I always find I want routing, data syncing features, and something like React's virtual DOM.

There's a short sample on Mithril's homepage that shows most of these features:

var app = {};

app.PageList = function() {  
  return m.request({ method: 'GET', url: 'pages.json' });

app.controller = function() {  
  var pages = app.PageList();
  return {
    pages: pages,
    rotate: function() {

app.view = function(ctrl) {  
  return [
    ctrl.pages().map(function(page) {
      return m('a', { href: page.url }, page.title);
    m('button', { onclick: ctrl.rotate }, 'Rotate links')

m.module(document.getElementById('example'), app);  

This example shows how to fetch data from a server and map it to the UI using a controller and a view. I like the way the app object is just a plain old object rather than a Mithril-specific construct, and the syntax for creating elements is succinct and easy to understand (m('button', ...)).

Mithril doesn't provide two-way data-binding, but Leo has an example that shows you how to implement it:

// A data store
var name = m.prop('');

// binding the data store in a view
m('input', { oninput: m.withAttr('value', name), value: name() });  

I took this from the m.request documentation which has loads of useful examples for working with web services.

Whether or not Mithril suits your requirements will depend on your project, but it has an excellent selection of features. There are testimonial tweets on the homepage where people are saying things about switching from AngularJS, which definitely grabbed my interest when I first saw the site.