Community Projects

Here you will find a list of projects created by Mithril users. Feel free to contribute.
Smaller code snippets can be found in Recipes and Snippets

---

Table of Contents

• Starter Kits
• Preprocessors - JS • MSX • CSS
• CSS Styles - for CSS animations see next section
• Theming - bootstrap, polymer, material design components/themes
• Animation - also see Animation section in Recipes and Snippets
• Routing
• Custom events - incl.Pub/Sub - also see here
• Testing
• Isomorphism (server-side javascript)
• Database Connectivity
• Internationalization
• Components
• Storage
• User Interface
• Miscellaneous
  • Dependency Injection
  • Bi-directional bindings
  • Firebase integration
  • Composable Apps
  • Other
• Example Applications
• Pro Tips
• Forks
• Uncategorized
• LAB - experiments that may lead to future projects

Styles

• messed-up-style - write modular, composable CSS in a functional way with pure javascript.

Theming

• mithril-bootstrap - a lot of work has been done porting bootstrap to Mithril but the project is still in development.
• Polythene - Polymer inspired modular implementation of Material Design
• mithril-mdl - Material Design Lite components
• Mithril Material Design Icons - Material Design SVG icons as Mithril elements

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.
• mithril-transition A lightweight library for Mithril to create your own custom transitions based on the lifecycle of your components. DEMO Improved DEMO

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.
• PubSub mixin - uses custom events
• PubSub - utilizes the browser eventsystem - communication between components
• mithril.bindings with pub/sub Succinct bi-directional bindings with pub/sub and the ability to create custom bindings.

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 - Isomorphic JavaScript framework using Mithril (see this post
• mithril-isomorphic - another attempt at making Mithril work both on the client and the server.
• jade-mithrilier - Define your views in Jade, using Mithril to render them.

Databases

• Mithril Postrest - Help you authenticating in a PostgREST server

Internationalization

• Mithril-translate - i18n for your Mithril applications
• translate.js - i18n translations with support for placeholders and multiple plural forms
• Example in production

Storage

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

User Interface

• Mithril Pagination - A Pagination component
• Mithril Slider - Content slider for Mithril
• Mithril Page Slider - Page slider for Mithril
• SVG icon example - Read about SVG in the documentation
• MMSVG - Mithril-ified SVG icons - to require SVG icons in JS code

Miscellaneous

Dependency Injection

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

Bi-directional Bindings

• 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.

Firebase integration

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

Other

• 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

Pro Tips

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

Forks

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

Uncategorized

• Proposals for event delegation/capturing (1, 2, 3)
• Finite State Machine (FSM) using Mithril v0.1 routing.

Lab experiments

• MALT - Flux Experiments with alt.js
• mithril-objectify - Optimize m() calls into simple JS objects via API, CLI, or Browserify
• arkenstone - Powerful and flexible componentization for Mithril