LemonadeJS

5.3.6 verified Fri May 01 auth: no javascript

LemonadeJS is a lightweight (7 KB), reactive JavaScript micro-library for building reusable components and web interfaces with two-way data binding. Current stable version is 5.3.6, released in 2024. It requires no transpiler, Babel, or external dependencies, and works in both Node.js (ESM/CJS) and the browser via CDN. Key differentiators: tiny footprint, framework-agnostic, native jSuites integration, and a simple API using tagged template literals. Ideal for developers who want reactivity without the overhead of larger frameworks like React or Vue.

Common errors

error Uncaught TypeError: lemonade.render is not a function ↓

cause Incorrect import or outdated version.

fix

Use ESM: import lemonade from 'lemonadejs'; or include script tag from CDN.

error Uncaught ReferenceError: render is not defined ↓

cause Component did not return a render function.

fix

Ensure component returns: return render => render...;

error TypeError: Cannot read properties of undefined (reading 'count') ↓

cause Using `this` inside a component without proper binding or outside component context.

fix

Initialize properties with this.prop = value inside the component function.

error Error: :loop expects an array, got object ↓

cause Loop attribute bound to a non-array value.

fix

Ensure the bound variable is an array: this.items = [];

Warnings

breaking LemonadeJS v5 dropped CommonJS support. require() will not work. ↓

fix Use ESM imports: import lemonade from 'lemonadejs'

gotcha Components must return a render function, not a string. ↓

fix Define component as: function MyComp() { return render => render`...`; }

gotcha Event handlers using onclick must be pure JavaScript expressions, not strings. ↓

fix Use onclick="${myFunction}" instead of onclick="myFunction()"

deprecated The `self` variable in loops is deprecated in favor of `this` inside the loop scope. ↓

fix Use `this` instead of `self` in :loop templates.

breaking In v3, the `lemonade` global object was removed for ESM users. Must use imports. ↓

fix Import lemonade: import lemonade from 'lemonadejs'

Install

npm install lemonadejs

yarn add lemonadejs

pnpm add lemonadejs

Imports

lemonade
wrong
```
const lemonade = require('lemonadejs')
```
correct
```
import lemonade from 'lemonadejs'
```
ESM default export; CommonJS require is not supported in v5+.

lemonade.render

wrong

import { render } from 'lemonadejs'

correct

import lemonade from 'lemonadejs'; lemonade.render(Component, document.getElementById('root'))

render is a property of the default export, not a named export.

Component Function (self)

wrong

function MyComponent() { return `<div>${this.prop}</div>`; }

correct

export default function MyComponent() { this.prop = value; return render => render`<div>${this.prop}</div>`; }

Components must return a function that uses the `render` tag function.

Quickstart

Demonstrates a simple counter component with two-way data binding and event handling using LemonadeJS.

import lemonade from 'lemonadejs';

function Counter() {
  this.count = 0;
  this.increment = () => { this.count++ };
  this.decrement = () => { this.count-- };
  return render => render`
    <div>
      <p>Count: ${this.count}</p>
      <button onclick="${this.increment}">+</button>
      <button onclick="${this.decrement}">-</button>
    </div>`;
}

lemonade.render(Counter, document.getElementById('root'));