Getting Started Installation Templating Event handling Components Directives Examples API Reference


Monkberry compiles templates into JavaScript classes, so you can extend them.

import ToDo from './ToDo.monk';

export default class extends Todo {
  constructor() {
    // Define internal state of your compenent if you need to.
    this.state = {
      text: '',
      complete: false
    // Add event listeners.
    this.on('click', '.edit', this.onEdit.bind(this));
  update(state) {
    // Define actions to do on state updates.
    Object.assign(this.state, state);
    // Call update of view itself.
  onEdit(event) {
    // ...

Now you can use it inside of another template:

{% import ToDo from './ToDo' %}

    {% for todo of todos %}
        <ToDo todo={{ todo }}/>
    {% endfor %}

Note that in this template we import ./ToDo, not ./ToDo.monk.

Full example of this todo app with all components can be found on monkberry/todomvc. This example uses redux for manipulating state.

Next →