Creating a template and rendering it, is going to give you a pretty good idea about exactly what Mustache can do, then we'll go ahead and actually wire it up with our newMessage and newLocationMessage callbacks. To kick things off over inside index.html we are going to make a new template by defining a script tag just next the chat__footer div.

Now inside of the script tag, we're going to add our markup, but before we can do that we have to provide a couple of attributes on script. First up this is going to be a reusable template and we're going to need a way to access it, so we'll give it an id, I'm going to call this one message-template, and the other property we're going to define is something called the type. The type property lets your editor and the browser know what's stored inside the script tag. We're going to set the type equal to, inside quotes, text/template:

<script id = "message-template" type="text/template">

</script>

Now we can write some markup and it's going to work as expected. To kick things off let's just go ahead and make a really simple paragraph tag. We're going to make a p tag inside of the script tag, and we'll add some text inside of it, This is a template, and we're going to go ahead and close the paragraph tag, and that is it, this is where we're going to start:

<script id="message-template" type="text/template"> 
  <p>This is a template</p> 
</script>

We have a message-template script tag. We can go ahead and now render this over inside index.js by commenting out all the code inside the newMessage listener. I'm going to comment out all of that code and now we can implement the Mustache.js rendering method.