---
title: "JavaScript Reactive Counter Example | LemonadeJS v4"
description: "LemonadeJS v4 archive. A basic counter reactive example using LemonadeJS."
source: https://lemonadejs.com/docs/v4/examples/counter/
---

Reactive Counter Example
=======

How to write a simple reactive counter using LemonadeJS. [See this example on codesandbox](https://codesandbox.io/s/lemonadejs-basic-reactive-counter-430pge)

```html
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs@4/dist/lemonade.js"></script>
<div id='root'></div>
<script>
function Counter() {
    const self = this;

    self.count = 1;

    self.add = function() {
        self.count++;
    }

    self.remove = function() {
        self.count--;
    }

    self.reset = function(element) {
        self.count = 0;
    }

    return `<div>
        <p>Count {{self.count}}</p>
        <div>
            <input type="button" onclick="self.add" value="+" />
            <input type="button" onclick="self.remove" value="-" />
            <input type="button" onclick="self.reset" value="Reset" />
        </div>
    </div>`;
};
lemonade.render(Counter, document.getElementById('root'));
</script>
</html>
```
```javascript
import lemonade from 'lemonadejs';

export default function Counter() {
    const self = this;

    self.count = 1;

    self.add = function() {
        self.count++;
    }

    self.remove = function() {
        self.count--;
    }

    self.reset = function(element) {
        self.count = 0;
    }

    return `<div class="counter">
        <h1>Count {{self.count}}</h1>
        <div>
            <input type="button" onclick="self.add" value="+" />
            <input type="button" onclick="self.remove" value="-" />
            <input type="button" onclick="self.reset" value="Reset" />
        </div>
    </div>`;
};
```