Monkberry is blazingly fast, small 1kb and simple
JavaScript library for building web user interfaces.
Install v4.0.0
Features
- small 1kb minified & gzipped
- simple, small learning curve
- fully tested
- precompiled templates
- source maps
- custom tags
- blazingly fast (only necessary dom updates)
Template
<ol>
{% for todo of todos %}
<li>
{% if todo.complete %}
<del>{{ todo.text }}</del>
{% else %}
<em>{{ todo.text }}</em>
{% endif %}
</li>
{% endfor %}
</ol>
<form>
<input type="text">
<button type="submit">Add #{{ todos.length + 1 }}</button>
</form>
JavaScript
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 = '';
});