index.html

---
layout: default
title: A JavaScript library for building web user interfaces
description: Monkberry is blazingly fast, small 1kb and simple JavaScript library for building web user interfaces.
---
<div class="content intro js-intro -visible">
    <div class="info">
        <svg class="logo" width="250" height="46" viewBox="0 0 250 46" xmlns="http://www.w3.org/2000/svg">
            <path d="M.45.3V36H7.8V10.95h.1L16.65 36h6.05l8.75-25.3h.1V36h7.35V.3H27.85l-7.9 24.55h-.1L11.5.3H.45zm48.9 22.8c0-1.033.1-2.05.3-3.05.2-1 .542-1.883 1.025-2.65a5.757 5.757 0 0 1 1.925-1.875c.8-.483 1.8-.725 3-.725s2.208.242 3.025.725a5.685 5.685 0 0 1 1.95 1.875c.483.767.825 1.65 1.025 2.65a15.514 15.514 0 0 1 0 6.075 8.059 8.059 0 0 1-1.025 2.65 5.397 5.397 0 0 1-1.95 1.875c-.817.467-1.825.7-3.025.7s-2.2-.233-3-.7a5.46 5.46 0 0 1-1.925-1.875 8.059 8.059 0 0 1-1.025-2.65c-.2-.983-.3-1.992-.3-3.025zm-7.1 0c0 2.067.317 3.933.95 5.6.633 1.667 1.533 3.092 2.7 4.275 1.167 1.183 2.567 2.092 4.2 2.725s3.467.95 5.5.95 3.875-.317 5.525-.95c1.65-.633 3.058-1.542 4.225-2.725 1.167-1.183 2.067-2.608 2.7-4.275.633-1.667.95-3.533.95-5.6 0-2.067-.317-3.942-.95-5.625-.633-1.683-1.533-3.117-2.7-4.3-1.167-1.183-2.575-2.1-4.225-2.75-1.65-.65-3.492-.975-5.525-.975-2.033 0-3.867.325-5.5.975-1.633.65-3.033 1.567-4.2 2.75-1.167 1.183-2.067 2.617-2.7 4.3-.633 1.683-.95 3.558-.95 5.625zM72.6 10.15V36h7.1V22.45c0-2.633.433-4.525 1.3-5.675.867-1.15 2.267-1.725 4.2-1.725 1.7 0 2.883.525 3.55 1.575.667 1.05 1 2.642 1 4.775V36h7.1V20.1c0-1.6-.142-3.058-.425-4.375-.283-1.317-.775-2.433-1.475-3.35-.7-.917-1.658-1.633-2.875-2.15-1.217-.517-2.775-.775-4.675-.775-1.5 0-2.967.342-4.4 1.025-1.433.683-2.6 1.775-3.5 3.275h-.15v-3.6H72.6zM100.9.3V36h7.1v-8.9l2.75-2.65 7.1 11.55h8.6L115.6 19.65l9.75-9.5h-8.4l-8.95 9.3V.3h-7.1zm47 22.8c0 1.067-.117 2.1-.35 3.1-.233 1-.6 1.883-1.1 2.65a5.761 5.761 0 0 1-1.875 1.825c-.75.45-1.658.675-2.725.675-1.033 0-1.933-.225-2.7-.675a5.677 5.677 0 0 1-1.9-1.825c-.5-.767-.867-1.65-1.1-2.65-.233-1-.35-2.033-.35-3.1 0-1.1.117-2.15.35-3.15.233-1 .6-1.883 1.1-2.65a5.677 5.677 0 0 1 1.9-1.825c.767-.45 1.667-.675 2.7-.675 1.067 0 1.975.225 2.725.675a5.761 5.761 0 0 1 1.875 1.825c.5.767.867 1.65 1.1 2.65.233 1 .35 2.05.35 3.15zM128.95.3V36h6.75v-3.3h.1c.767 1.433 1.9 2.45 3.4 3.05 1.5.6 3.2.9 5.1.9 1.3 0 2.583-.267 3.85-.8s2.408-1.35 3.425-2.45 1.842-2.508 2.475-4.225c.633-1.717.95-3.758.95-6.125s-.317-4.408-.95-6.125c-.633-1.717-1.458-3.125-2.475-4.225-1.017-1.1-2.158-1.917-3.425-2.45-1.267-.533-2.55-.8-3.85-.8-1.6 0-3.142.308-4.625.925a7.576 7.576 0 0 0-3.525 2.925h-.1V.3h-7.1zm47.95 20h-11.55a8.15 8.15 0 0 1 .325-1.7 5.22 5.22 0 0 1 .95-1.8c.45-.567 1.05-1.042 1.8-1.425s1.692-.575 2.825-.575c1.733 0 3.025.467 3.875 1.4.85.933 1.442 2.3 1.775 4.1zm-11.55 4.5H184c.133-2-.033-3.917-.5-5.75-.467-1.833-1.225-3.467-2.275-4.9-1.05-1.433-2.392-2.575-4.025-3.425-1.633-.85-3.55-1.275-5.75-1.275-1.967 0-3.758.35-5.375 1.05-1.617.7-3.008 1.658-4.175 2.875-1.167 1.217-2.067 2.658-2.7 4.325-.633 1.667-.95 3.467-.95 5.4 0 2 .308 3.833.925 5.5.617 1.667 1.492 3.1 2.625 4.3 1.133 1.2 2.517 2.125 4.15 2.775 1.633.65 3.467.975 5.5.975 2.933 0 5.433-.667 7.5-2s3.6-3.55 4.6-6.65h-6.25c-.233.8-.867 1.558-1.9 2.275-1.033.717-2.267 1.075-3.7 1.075-2 0-3.533-.517-4.6-1.55-1.067-1.033-1.65-2.7-1.75-5zm21.85-14.65V36h7.1V24.35c0-1.167.117-2.25.35-3.25.233-1 .625-1.875 1.175-2.625S197.1 17.133 198 16.7c.9-.433 2-.65 3.3-.65.433 0 .883.025 1.35.075.467.05.867.108 1.2.175V9.7c-.567-.167-1.083-.25-1.55-.25-.9 0-1.767.133-2.6.4a9.528 9.528 0 0 0-2.35 1.125 8.844 8.844 0 0 0-1.95 1.75 8.732 8.732 0 0 0-1.35 2.225h-.1v-4.8h-6.75zm18.45 0V36h7.1V24.35c0-1.167.117-2.25.35-3.25.233-1 .625-1.875 1.175-2.625s1.275-1.342 2.175-1.775c.9-.433 2-.65 3.3-.65.433 0 .883.025 1.35.075.467.05.867.108 1.2.175V9.7c-.567-.167-1.083-.25-1.55-.25-.9 0-1.767.133-2.6.4a9.528 9.528 0 0 0-2.35 1.125 8.844 8.844 0 0 0-1.95 1.75 8.732 8.732 0 0 0-1.35 2.225h-.1v-4.8h-6.75zm33.2 29.05l10.8-29.05h-7.35l-5.65 17.7h-.1l-5.85-17.7h-7.55l9.05 24.25c.2.5.3 1.033.3 1.6 0 .767-.225 1.467-.675 2.1-.45.633-1.142 1-2.075 1.1-.7.033-1.4.017-2.1-.05-.7-.067-1.383-.133-2.05-.2v5.85c.733.067 1.458.125 2.175.175.717.05 1.442.075 2.175.075 2.433 0 4.333-.45 5.7-1.35 1.367-.9 2.433-2.4 3.2-4.5z" fill="#FFF" fill-rule="evenodd"/>
        </svg>
        <div class="about">
            Monkberry is blazingly fast, small 1kb and simple
            JavaScript library for building web user interfaces.
        </div>
        <a class="install" href="/docs/installation">
            <svg class="icon-install" width="12" height="13" viewBox="0 0 12 13" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.571 0H7.43v5H11l-5 5-5-5h3.571V0zM0 11h12v2H0v-2z" fill="#FFF" fill-rule="evenodd"/>
            </svg>
            Install <span class="js-version">v4.0.0</span>
        </a>
        <div class="features">
            <h5>Features</h5>
            <ul>
                <li>small 1kb minified & gzipped</li>
                <li>simple, small learning curve</li>
                <li>fully tested</li>
                <li>precompiled templates</li>
                <li>source maps</li>
                <li>custom tags</li>
                <li>blazingly fast (only necessary dom updates)</li>
            </ul>
        </div>
    </div>
    <div class="example">
        <div class="block">
            <div class="block-name">Template</div>
            <pre><code class="language-monk">{% raw %}&lt;ol&gt;
  {% for todo of todos %}
    &lt;li&gt;
      {% if todo.complete %}
        &lt;del&gt;{{ todo.text }}&lt;/del&gt;
      {% else %}
        &lt;em&gt;{{ todo.text }}&lt;/em&gt;
      {% endif %}
    &lt;/li&gt;
  {% endfor %}
&lt;/ol&gt;
&lt;form&gt;
  &lt;input type=&quot;text&quot;&gt;
  &lt;button type=&quot;submit&quot;&gt;Add #{{ todos.length + 1 }}&lt;/button&gt;
&lt;/form&gt;{% endraw %}</code></pre>
        </div>
        <div class="block">
            <div class="block-name">JavaScript</div>
            <pre><code class="language-js">{% raw %}const state = {
  todos: [
    {text: 'Primum', complete: true},
    {text: 'Secundo', complete: false},
    {text: 'Tertium', complete: false}
  ]
};

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

view.on('submit', 'form', function (event) {
  event.preventDefault();
  const input = view.querySelector('input');

  state.todos.push({text: input.value, complete: false});
  view.update(state);

  input.value = '';
});{% endraw %}</code></pre>
        </div>
        <div class="block -result">
            <div class="block-name">Result</div>
            <div class="result js-result"></div>
        </div>
    </div>
</div>

<!-- <div class="stars js-stars">
    <div class="small"></div>
    <div class="medium"></div>
    <div class="big"></div>
</div> -->