Mustache ( module for the Play! Framework
Failed to load latest commit information.
app/play/modules/mustache Add another tag to output templates as a raw script instead of a meta… Mar 11, 2012
documentation/manual trying to fix textile indentation Nov 13, 2010
public/javascripts Move play-mustache.min.js to public folder Jul 15, 2011
src [issue4] Make compiler ThreadLocal instead of session Jul 19, 2011 fixed mistake in readme Nov 13, 2010


This module allows you to define logic-less template snippets that can be used server-side in your Play views as well as client-side in your JavaScript.

The template snippets use Mustache, which is a logic-less template language. For a complete reference of the language see the manual.


Install the module

Install the Mustache module from the modules repository:

play install mustache

Enable the module

After installing the module, add the following to your application.conf:

# The Mustache module


Meta and Script Tags

The first step is to put the mustache.meta tag somewhere in your document. This tag outputs an HTML meta tag containing the snippets you have defined for the current request.

After your meta tag you should include play-mustache.min.js, which is in the play-mustache lib directory. The file contains a JavaScript Mustache compiler and a mechanism to parse the templates out of the play-mustache meta tag. Copy this file to your public directory or to your CDN and include it in your document.

        <title>#{get 'title' /}</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/main.css'}">
        <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}">
        #{mustache.meta /}
        <script type="text/javascript" src="@{'/public/javascripts/play-mustache.min.js'}"></script>
        #{doLayout /}

Inline Template Snippets

You can define Mustache templates inline in your views using the mustache.template tag:

#{mustache.template 'task_item'}
    <li class="task" id="task_{{id}}">
        <span class="name">Task {{id}}</span>
        <span class="details">{{details}}</span>
        <span class="priority">{{priority}}</span>

You can then use the template within your view using the mustache.print tag:

<ul id="tasks">
#{list tasks, as: 'task'}
    #{mustache.print 'task_item', context:task /}

And you can use the template within your JavaScript using the PlayMustache.to_html method:

var data = {
    id: '34',
    details: 'Finish the project',
    priority: 'High'
var html = PlayMustache.to_html("task_item", data);

External Template Snippets

If you don't want to specify your snippet inline, you can move it into an external file. By default the module will look in app/views/mustaches for template files, but you can configure this path by specifying mustache.dir in your application.conf.

To reference an external snippet, just use the relative filename as the template name. For example, if your file is called app/views/mustaches/my_template.html then you would use it server-side like this:

#{mustache.print 'my_template.html', context:data /}

And client-side like this:

PlayMustache.to_html('my_template.html', data);