Getting started with LemonadeJS

Getting started

LemonadeJS is about 4 KBytes (compressed). No dependencies are required.

LemonadeJS is a compact yet potent micro-reactive JavaScript library for building web interfaces without transpile or external dependencies, enabling component development via webpack or directly in the browser.

With LemonadeJS, you can create anything from simple widgets to more advanced web applications. To get started with the reactive LemonadeJS library, choose one of the following installation methods:


To get started with the reactive LemonadeJS library, choose one of the following installation methods:


<script src=""></script>

NPM installation

% npm install lemonadejs

Source code (MIT)

Quick Start

If you would like to create a base project on your machine, you can use.
// Create a new project
% npx @lemonadejs/create myApp
// Go to the project folder
% cd myApp
// Run a hot update server
% npm run start
Now you can go to your browser and have fun.

Official components

The LemonadeJS official components are javascript implementation of common application required libraries.

Testing Library

Tester is a official library for testing LemonadeJS components.

Pico Library

Pico is a unique collection of LemonadeJS components with no dependencies and a limit of 2 KBytes each.

The concept of LemonadeJS

In LemonadeJS, the self object defines a component's properties and methods. A property self is used in the template to automatically create observers to synchronise the property value and associated HTML element.

Data binding

As shown in the example below, all property value updates will affect the elements in the DOM.

<script src=""></script>
<div id='counter'></div>
function Hello() {
    // Reactive properties
    const self = this;
    self.count = 90;
    // Count down every second
    setInterval(function() {
        if (self.count == 0) {
            self.count = 90;
    , 1000);
    // Component template
    return '<h1>Count: {{self.count}}</h1>';
lemonade.render(Hello, document.getElementById('counter'));

Next Chapter

Before we delve into the two-way data binding between JavaScript and HTML elements in the following few chapters, let's first look at the attributes provided by LemonadeJS.

Next chapter: LemonadeJS attributes