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

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

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

• see jade-mithrilier under Templating

• m-iso A server side utility to generate HTML and XML fragments as well as full documents and web pages, along with ports of many of Mithril's other features. It can also work on the client with Browserify, Webpack, and friends.

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