Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including material-components-mithril with all npm packages installed. Try it out:

require("material-components-web/package.json"); // material-components-web is a peer dependency. require("mithril/package.json"); // mithril is a peer dependency. var materialComponentsMithril = require("material-components-mithril")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

material-components-mithril v0.1.0

Mithril components library compatible with material-compornents-web.


Mithril(v1) components library with material-components-web.

CircleCI / Codacy Badge


This library doesn't treat css at all, just define tags and add classes for MDC components.

So first, you have to implement css from "material-components-web".

In your HTML,

<link rel="stylesheet" type="text/css" href="">


import "material-components-web/dist/material-components-web.css";

to inject style tags dynamically with tools like webpack css-loader + style-loader.

See more information about using material-components-web at the official document.

Secondly, load material-components-mithril.


npm install material-components-mithril


<script src=""></script>

Then, you can use components as below:


var m = require("mithril");
var mcm = require("material-components-mithril");
var button = {
    view: function() {
        return m(mcm.button, "Submit");
m.mount(document.body, button);


import m from "mithril";
import {button} from "material-components-mithril";
m.mount(document.body, {
    view: () => m(button, "Submit")


<script src=""></script>
    var button = {
        view: function() {
            return m(materialComponentsMithril.button, "Submit");
    m.mount(document.body, button);

Codes above will make same results embedding button component at the element.



RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free