Getting Started Installation Templating Event handling Components Directives Examples API Reference

API Reference

Monkberry API strictly follows semantic versioning.

Monkberry.render​(template, node[, options])

Returns a new Monkberry template instance, a “view”.

const view = Monkberry.render(Template, document.body);

Options object:

Monkberry.prerender​(template, times)

Prerender template for future usage.

Monkberry.prerender(Template, 10);

// Will return view with already created DOM nodes.
const view = Monkberry.render(Template, document.body);

This can be very useful. For example you can prerender templates while waiting for an XHR response.


Append rendered view to the specified node.


Insert rendered view before the specified node.


Return view’s nodes. Note that if your template contains more than one root element, createDocument will return DocumentFragment that contains all of those nodes. If you have only one root node, it will be returned as is.


Update rendered template with a new state. You can specify only a part of state to update or you can update the entire state.


const state = {
    title: 'Title #1',
    content: '...'


// Update only title.
view.update({title: 'Title #2'});


Remove view’s nodes from document, and put it to pool for future reuse.


Select node by query.

Note that this function uses Element.matches() for checking root nodes. Include polyfill for matches if you use it.

If your template contains more than one node on first level, querySelector will search all subtrees. Array of all top level nodes can be accessed with view.nodes[] array.

Note that querySelector cannot work with template which has if/for/custom node on first level.

{% if cond %}
{% endif %}

You will get an exception like this:
Cannot use querySelector with non-element nodes on first level.

You can solve this by wrapping everything into another node:

    {% if cond %}
    {% endif %}