Awesome

Awesome Mithril

<img src="https://mithril.js.org/logo.svg" align="right" width="100">

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

• Zulip 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.
• Mithril.js by Examples - The missing addition to Mithril.js' website with many up-to-date code examples that are often searched for and just work.

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.
• gomithrilapp - Sample notepad application in Mithril (JSX) and Go showing good practices and integrations with modern tools using Bulma, Cypress, Docker, ESLint, gvt, make, Rove, Swagger, and Travis-CI.
• gomithriltsapp - Sample notepad application in Mithril (TypeScript and HyperScript) and Go showing good practices and integrations with modern tools using Bulma, Cypress, Docker, ESLint, gvt, make, Mock Service Worker, Rove, Swagger, and Travis-CI.
• Vegan - Minimalistic "Kanban boardish" client.
• Treehouse - Lightweight outliner app built with Deno and Mithril. Use in the browser or build your own custom app.

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)
• Simple infinite scrolling (lazyloading)
• Nested hyperscript helper
• Infinite Scroll for Mithril on mobile and desktop
• Using Powerform + Mithril

Starter kits

• 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
• sourcestack - Template for full-stack Typescript web apps on AWS, using Mithril on the front end.

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
• famicon - Fontawesome svg icons component for mithril
• mithril-graphql - A lightweight GraphQL client for the Mithril framework.
• Maille - A component library for Mithril

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