Community Projects

Here you will find a list of projects and code snippets created by Mithril users. Feel free to contribute.

---

• Starter Kits
• Templating
• Routing
• Animation
• Custom events
• Testing
• Isomorphism
• Database Connectivity
• I18N
• Components
• Storage
• Miscellaneous
  • Pub/Sub
  • Dependency Injection
  • Bi-directional bindings
  • Firebase integration
  • Infinite Scroll
• Example Applications
• Pro Tips
• Forks
• Uncategorized

Tools

Starter Kits

• mithril-rails - a Rails gem that includes MSX

• mithril boilerplate - A setup to get up and running with Mithril in an NodeJS environment. Includes LESS.

• another mithril boilerplate - Another setup to get up and running with Mithril in NodeJS. Includes MSX, LESS and Bootstrap.

• mithril coffee starter Basic setup for Mithril with CoffeeScript, Browserify, LESS, and Bootstrap out of the box.

• mithril-hx Mithril for the modern cross-platform language Haxe.

• mithril-quickstart Quick start with NodeJs, Express, themable using bootswatch, authentication using JWT+bcrypt+mongodb and in-memory dev mongodb

• node-catapult - A minimal starter project that includes express, browserify, and Mithril. Built for ease of extension for your own needs.

• Basic todo, with babel and msx

Templating

• MSX - React-based preprocessor that allows Mithril templates to be written with HTML syntax (e.g. <div></div> instead of m("div"))

• msx-reader - another MSX reader for JavaScript, powered by sweet.js

• mithrilify Browserify transform for converting Mithril view templates

• mithril.sugarTags Sugar'd tags for use with Mithril views, much nicer and succinct compared to normal view definitions with the same benefits

• mithril-n - pure DOM nodes in Mithril templates

Routing

• Mithril-Router - Django style router for Mithril.js

• Mithril-ui-router - a state-based routing system for Mithril in a similar way than ui-router for Angular.js

• Moria - a routing system for Mithril

• Very simple router wrapper to perform some action on route changes, for example call analytics

Animation

• mithril.animate A tiny library that allows you to declaratively bind CSS3 transition and transform animations to your Mithril elements via model properties. UPDATE: Now it's easier to add animations, and I've added keyframe animations: http://jsguy.github.io/mithril.animate/#Using_a_keyframe_binding

• animator.js A factory for decorating Mithril modules / views / elements with incoming and outgoing animations.

Custom Events

• Mithril-touch - handle touch and mouse events evenly with Mithril. Supports tap, dbltap, taphold (longpress), swipeleft, swiperight, swipeup, swipedown.

• eventsMixin - eventsMixin for Mithril for pain-free cross-component communication. Uses browser DOM events. Registered events are automatically removed on unload of component controller.

Testing

• mithril-query A virtual Dom querying library to make traversal of templates easier for testing.

Isomorphism

• mithril-node-render A node renderer that converts Mithril views to HTML on server side (example usage)

• misojs: MIthril iSOmorphic JavaScript framework

• Another attempt at making Mithril work both on the client and the server

Databases

Mithril Postrest - Help you authenticating in a PostgREST server

I18N

• Mithril-translate - i18n for your Mithril applications

• translate.js - i18n translations with support for placeholders and multiple plural forms

Storage

• Mithril-storage - A storage library for your Mithril applications (cookies, localStorage, sessionStorage, in-memory).

Miscellaneous

• mithril-di - a small utility tool to enable dependency injection (usage example)

• mithril.bindings Succinct bi-directional bindings with pub/sub and the ability to create custom bindings.

• bidi.js by Barney Carroll Component with bi-directional bindings. Can be used as extension to Mithril view language by patching m() bidi example Uses the modulator extension.

• PubSub mixin - uses custom events

• PubSub

• mithril.bindings with pub/sub Succinct bi-directional bindings with pub/sub and the ability to create custom bindings.

• m.firebase - use firebase in conjunction with Mithril.

• Mithril.Elements - composable custom element types for Mithril

• Modulator - an alternative to m.component with a focus on precise controller identity, without mandating unique DOM elements per component

• Superflux, an opinionated model layer for Mithril based on Flux

• Mithril Solr - A Front-end Interface to Solr

• Mithril Pagination - A Pagination component

• Infinite Scroll - Infinite scroll for Mithril

Pro Tips

• Naming, wrapping m.request, wrapping a layout, coding style for controllers to avoid 'this' Leo comments on StackExchange

Forks

• mReact, React like rendering library built on top of mithril's rendering engine

Uncategorized

• Mixed MVC framework - Mithril.js Controller,View + Backbone Event,Model,Collection

• Talk with Slides to fork to introduce mithril to you local meetup

• Proposals for event delegation/capturing (1, 2, 3)

• SVG icon example - Read about SVG in the documentation

• Finite State Machine (FSM)