Model to Template binding
JavaScript CSS HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Mucilage is a lightweight (full ~2.9KB, light ~0.8KB) data to template binding engine which allows to bind the updating of the template with the data. Mucilage return an object containing methods matching the data keys which can then be used to update the data object or retrieve current values.

Due to the nature of the template engine the template is re-compiled every time the data object changes.

Mucilage also come in a "light build" which is based on a strip down version of the template engine so it allows only interpolation and doesn't have any configurable settings.

Core API

mucilage( string template, object data, HTMLElement target );

Bind template and data together, fill the targeted element with the compiled template and return a new mucilage data object.

mucilage( array[template, settings, default] , object, HTMLElement );

Same as above but uses the array to pass arguments to the template engine.

mucilage.templateSettings( object settings );

Change the default settings of the template engine. All instance of mucilage after that will use those settings.

NOTE: Not available on the light version of Mucilage.

mucilage( object settings )

Change mucilage default settings in one call

Instance Special API

Available on the full version when the setting "special" is set to to true, which it is by default.


return the current data object


update the current data object and then recompiled the template


return a freshly compiled template


update the current instance template

Template engine features

  • no dependencies
  • custom delimiters
  • runtime evaluation
  • runtime interpolation
  • compile-time evaluation
  • partials support
  • encoding
  • control whitespace - strip or preserve
  • streaming friendly


Mucilage light (interpolation only)

<!DOCTYPE html>
<script src="mucilage-light.js"></script>
<div id="content"></div>
var template = '<h1>{{=$.title}}</h1><p>{{=$.message}}</p>',
    data = {
    title: 'Title',
    message: 'Message'
    muc = mucilage(template, data, document.getElementById('content')); 

    // the content element now contains <h1>Title</h1><p>Message</p>

    // this will update the Message in 3 seconds
    setTimeout(function() {
    muc.message('New message');
    }, 3000);


Mucilage full featured

<!DOCTYPE html>
<script src="mucilage.js"></script>
<div id="content"></div>
<script type="text/mucilage-template" id="templ">
<h1>Just static text</h1>
<p>Interpolation {{=$.f1   +    $.f3}} </p>
<div> JavaScript block evaluation
{{ for(var i=0; i < $.f2; i++) {
    console.log("Pass\t" + i);
    {{ } }}
    <div> Encoding {{!'<a   href=""></a>'}}</div>
// original data and template
var data = {
    f1: 10,
    f2: 10,
    f3: 10,
    template = document.getElementById('templ').text;

// convert data into a mucilage object
data = mucilage(template, data, document.getElementById('content'));

// update data object and update the template
}, 3000);

Pass template options in instance call

Mucilage first argument can be an array which is used to pass parameters directly to the template engine so that the full power of doT can be released.

// change template settings for the created instance
mucilage(['{{= }}', {varname:'it'}], {foo:'foo'}, document.getElementById('content')); 

Use special instance methods

var div = document.createElement('div'),
    muc = mucilage('', {}, div);

    foo: 'foo'

muc.$('{{= $.foo }}');

var compiled = muc.$();

Disable special methods globally



The template engine is powered by doT.js, written by Laura Doktorova, which is a high performance template engine. See the link for more information.