It is also possible to create reusable LemonadeJS components from JavaScript classes. The most important point when dealing with classes is that the self object is a reference to the this inside the class. Thus, you can update internal attributes or invoke the class methods from the self into the template as in the example below.


Create a basic counter as a JavaScript class.

<script src=""></script>
<div id='root'></div>
class Counter extends lemonade.component {
    constructor(o) {
        this.count = 1;

    counter() {

    render() {
        return `
            <input type='button' onclick="self.counter()" value='Go' />
            <input type='button' onclick="self.count = 0" value='Reset' />
lemonade.render(Counter, document.getElementById('root'));

See this working example on codesandbox.