Awesome Mithril

A curated list of Mithril awesome

Mithril is a modern client-side JavaScript framework for building Single Page Applications.

Contents

• Official Resources
• Community
• Learn
  • Tutorials
• Examples
  • Apps
  • Snippets
  • Starter kits
• Testing
• Libraries, Components & Plugins
• Tools
• pre 1.0 Release
• Mithril in the Wild
• License

Official Resources

• Website
• Simple Application Tutorial
• API Reference
• GitHub Repo
• Framework Comparison
• Change Log
• Contribution Guide
• Job listing
• Who uses Mithril?

Community

• Gitter Chat Room
• Use #mithriljs on Twitter and other social media.

Learn

Tutorials

• Isomorphic web application with Mithril - How to write isomorphic web applications, i.e. server-side rendering and client-side code with one codebase.
• Example Mithril Components - Concise examples with both ES5 and ES6 versions.

Examples

Apps

• Isomorphic web application with Mithril - Server-side rendering example using mithril-node-render.
• Mithril tutorial app - The tutorial app from mithril.js.org adapted to Typescript.
• Freddy - Mobile Reddit Reader.
• Flems - Web playground & sandbox as an embeddable module.
• mithril-slides - Keynote-inspired presentation app.
• WaveShader - Audio wave sketchpad.
• Flash Games Catalog - Catalog and launcher for flash games.
• Tutanota - Secure emails for everybody.

Snippets

• Basic drag and drop example
• Somewhat opinionated typeahead
• Simple carousel
• Filter using CSS
• Get a string representation of a Vnode using fragments
• Granular redraw with streams
• Modal component example
• Mithril and A-Frame
• Declarative setInterval (using streams instead of hooks)

Starter kits

• Mithril/SASS/Webpack2
• Mithril/Typescript/SASS/PostCSS/Webpack2
• Mithril/Typescript/PostCSS/Browserify/HMR/Budō
• Game development with Mithril/THREE.js/Typescript
• Mithril Starter Project with Rollup, Babel, LiveReload, Jest and ESLint
• mithril-starter-kit - A boilerplate Mithril application using Webpack 4, ES6, Sass/SCSS, Js and scss hot reload and eslint

Testing

Mithril does not require specialized tools for testing, however the following have been developed as side projects to the main framework or by the community.

• Ospec - Mithril's own fast test runner.
• Mithril Query - Query Mithril virtual dom for testing purposes.

Libraries, Components & Plugins

• Polythene - Material Design for Mithril and React.
• mopt - Optimize m() calls to javascript objects.
• mithril-range - Customizable range component.
• mithril-select - Customizable select component.
• Mithril-Datepicker - Localizable date picker.
• TypeScript types - Typescript type definitions for Mithril.
• mithril-helpers - Collection of Mithril helpers and utilities.
• mithril-transition-group - Components for creating state/class based transitions.
• mithril-checkbox - Customizable checkbox and radio button component.
• Construct-UI - a UI library inspired by Blueprint, Polythene and Ant-design
• mithril-materialized - a component library for materialize-css
• mithril-leaflet - a map component based on Leaflet
• mithril-portal - a component for rendering inline children to document.body

Tools

• Mithril Template Converter - Convert HTML to m() hyperscript.
• Mithril Emmet VSCode Extension - Add Emmet (zen-coding) support for Mithril inside of VSCode.

pre 1.0 Release

• Leo's Blog - Leo, the main Mithril author, writes about virtual dom and tips and tricks.
• Github Wiki - Wiki content is mostly about the 0.2 version, some material may be more up to date with the current API.

Mithril in the Wild

• flems.io - Web Playground & Sandbox with easily shareable urls and other neat features.
• lichobile - Mobile version for lichess.org using Mithril inside Cordova.

License