Mithril Hello World Example
Tags: javascript, mithriljs, tutorial
Published: 2019-10-24 06:18:40

##### Table of content
-  [Introduction](#Introduction)
-  [Prepare basic HTML](#Prepare-basic-HTML)
-  [Include Mithril  library](#Include-Mithril-library)
-  [Add mounting element for Mithril in dom and mount Mithril there](#Add-mounting-element-for-Mithril-in-dom-and-mount-Mithril-there)
-  [Render "Hello world" by Injecting Hello world inside mounting element](#render-hello-world)

-----------------------

#####  [# Introduction](#Introduction)

> *Hello world* program is best starting point to learn new programming language or framework. 

This hello world program will explain how to do very basic minimal setup to use Mithril and then will end with displaying "Hello world" printed on screen.

##### [# Prepare basic HTML](#Prepare-basic-HTML)

Create html file with the basic tags of html, head, title, and body.
``` HTML
<html>
    <head>
          <title>Mithril Hello World Example</title>
    </head>
    <body>   
   </body>
</html>
```

##### [# Include Mithril library](#Include-Mithril-library)

We will be using Mithril CDN for our example.
``` 
<head>
    <script src="https://unpkg.com/mithril/mithril.js">
    </script>
</head>
```

#####  [# Add mounting element for Mithril in dom and mount Mithril there.](#Add-mounting-element-for-mithril-in-dom-and-mount-Mithril-there)

We will be using div element with id *app* as mounting point of our Mithril app. 

```
<body>
   <div id="app"></div>
</body>
```

Now we have to inform Mithril, that we want to use the element with id 'app' has to be used as mounting point of Mithril.
In order to do that we have to select that dom element from dom.

```
 var app = document.getElementById("app") 
```
After adding mounting point our code will look like.

> I am saying it as mounting point because mithril actually mounts dom elements to that dom element as child and you can have multiple mounting points for multiple mithril rendering functions. See example [multiple mounting points](http://learnit.mchampaneri.in/post/m-function-of-mithril#examples)

 ``` 
<body>
    <div id="app"></div>
    <script type="text/javascript">
          var app = document.getElementById("app")
    </script>
</body>
```

#####  [# Render "Hello world" by Injecting Hello world inside mounting element](#render-hello-world)

We have added Mithril library and also have a mounting point for it. Let's render simple "Hello world" by injecting it inside mounting point.

> Here *m* represents Mithril object. 
> We are using [m.render](http://learnit.mchampaneri.in/post/m-render-function) function for rendering.

```
<!DOCTYPE html>
<html>
  <head>
    <title>Mithril Hello World Example</title>
    <script src="https://unpkg.com/mithril/mithril.js"></script> 
	</head>
    <body>
      <div id="app"></div>
        <script type="text/javascript">
          var app = document.getElementById("app");
          m.render(app, "Hello world");
        </script>
    </body>
</html>
```


#####  [# Example](#hello-world-example-render)

Take a look at live example hosted on codesandbox !
[Codesandbox Example](https://codesandbox.io/embed/keen-mendel-li0c3)