XYZ Example to Show How Things Work

by tbreuss

Level: beginner • Mithril.js Version: latest

This example is for demonstration purposes only and shows how things work with Eleventy, markdown, and rendering filters and functions.

Live Example

Dependencies

Type Name URL
scriptmithril@latesthttps://unpkg.com/mithril@latest

HTML

<!-- index.html -->
<!doctype html>
<html lang=en>
<head>
  <meta charset=utf-8>
  <title>XHR</title>
</head>
<body>
<div id="xyz"></div>
</body>
</html>

CSS

/* app.css */
@import "https://unpkg.com/water.css@2/out/water.min.css";

Component.js

// component.js
const XYZ = {
  view: function() {
    return m("main", [
      m("h1", {}, "XYZ Example"),
      m("p", "This is just an example to show how things work.")
    ])
  }
}

App.js

// app.js
m.mount(document.getElementById('xyz'), XYZ)

As a prerequisite for this snippet, the latest version of Mithril.js framework is required. Beginners should have no problems following this example, that simply shows some basic recipies.

In this code sample Mithril.js' m.mount API method is use, besides the basic hyperscript function m().

The example was written by tbreuss, last edits were made on 17 January 2021. The author has contributed some more snippets. Click here to see them all.

Contribute

Did you note a typo or something else? So let me know by opening an issue. Or much better: just fork the repository on GitHub, push your commits and send a pull request. Ready to start your work? Then click on the edit link below. Thanks in advance!

See more code examples  •  Edit this example on GitHub