You can also create reusable LemonadeJS components using JavaScript classes. Remember that {self} references {this} within any LemonadeJS class. That allows you to update internal attributes or call class methods from the self within the template, as demonstrated in the example below.


It is possible to create lemonade components using JavaScript classes, as seen in the example below.

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

    counter() {

    render() {
        return `<>
            <div>Counter: {{self.count}}</div><br>
            <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.

Next Chapter

The next Chapter presents how to create a reactive Webcomponents using LemonadeJS.

Next chapter: Webcomponents