Moon has a custom templating syntax similar to Mustache. All attributes (not directives) and text are compiled for these templates.

Here is an example:

<h1 id="{{id}}">{{data}}</h1>

Templates can have a valid Javascript path for accessing properties on an array, object, or both. For example:


Note: Internally, this will be converted to something like:

instance.callMethod('method', [instance.get('data')[5].baz]);


By default, text data will be escaped, meaning that you cannot have HTML in it. If you do, it will be rendered as plain text. To render HTML, use the m-html directive.


Directives are prefixed with m-.

They are shorthands for the compiler, for example, m-if will tell the compiler to conditionally render some element. Directives are all compiled as if they were inside of a template, meaning they are compiled as expressions.

For example, instead of m-if="{{condition}}", you do m-if="condition", while you would use the first version for normal attributes.