Moon has a custom HTML compiler built in to generate render functions. This means that before Moon can mount, the template must go through Moon's HTML compiler to be turned into plain javascript.


Render functions are called in each update, and it gives Moon a new version of the lightweight virtual DOM. These render functions can be defined in a render option (for advanced users). They use a "HyperMoon" syntax which should provide custom meta data for the virtual DOM engine.

For example:

new Moon({
  render: function(m) {
    return m('h1', {attrs: {}}, {shouldRender: false}, [m("#text", {shouldRender: false}, "Hello Moon!")]);
    // same as <h1>Hello Moon!</h1>


You should always precompile your templates into render functions and provide them as this option when pushing into production, so Moon can skip compiling your HTML during runtime.

To directly compile HTML, use the global Moon.compile function.

Moon.compile("<p>Some HTML</p>");

You can also play around with the compiler below: