lemonadejs

library5.3.6jsnpmunverified

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.

web-framework

npm install lemonadejs

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · LEMONADEJS

lemonadejs

web-frameworkjavascriptv5.3.6

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

lemonade

✓ import lemonade from 'lemonadejs'

✗ const lemonade = require('lemonadejs')

ESM default export; CommonJS require is not supported in v5+.

lemonade.render

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

✗ import { render } from 'lemonadejs'

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

Component Function (self)

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

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

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

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'));

Debug

Known issues

breakingLemonadeJS v5 dropped CommonJS support. require() will not work.

fix

Use ESM imports: import lemonade from 'lemonadejs'

affects: >=5.0.0

gotchaComponents must return a render function, not a string.

fix

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

affects: >=3.0.0

gotchaEvent handlers using onclick must be pure JavaScript expressions, not strings.

fix

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

affects: >=2.0.0

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

fix

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

affects: >=4.0.0 <5.0.0

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

fix

Import lemonade: import lemonade from 'lemonadejs'

affects: >=3.0.0

Errors

Common errors & fixes

Uncaught TypeError: lemonade.render is not a function

Incorrect import or outdated version.

fix

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

Uncaught ReferenceError: render is not defined

Component did not return a render function.

fix

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

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

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

fix

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

Error: :loop expects an array, got object

Loop attribute bound to a non-array value.

fix

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

Upgrade

Version history

5.3.6latest on npm

Audit

Dependencies

jSuitesoptionalOptional integration for building advanced interfaces with spreadsheets, calendars, and other components.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/lemonadejs/lemonadejs ↗

packagehttps://www.npmjs.com/package/lemonadejs ↗

homepagehttps://lemonadejs.net ↗