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

---

• Starter Kits
• Precompilers -(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
• I18N - translation
• Components
• Storage
• User Interface
• Miscellaneous
  • Dependency Injection
  • Bi-directional bindings
  • Firebase integration
  • Composable Apps
• Example Applications - with code
• Pro Tips
• Forks
• Uncategorized
• LAB - experiments that may lead to future projects

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

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: MIthril iSOmorphic JavaScript framework

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

• see jade-mithrilier under Templating

Databases

Mithril Postrest - Help you authenticating in a PostgREST server

I18N Translation

• 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

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

• 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

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

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

• Finite State Machine (FSM)

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