{"id":25860,"library":"lemonadejs","title":"LemonadeJS","description":"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.","status":"active","version":"5.3.6","language":"javascript","source_language":"en","source_url":"https://github.com/lemonadejs/lemonadejs","tags":["javascript","reactive","two-way binding","two-way data binding","javascript two-way data binding","reactive micro library","reactive javascript library","hooks","typescript"],"install":[{"cmd":"npm install lemonadejs","lang":"bash","label":"npm"},{"cmd":"yarn add lemonadejs","lang":"bash","label":"yarn"},{"cmd":"pnpm add lemonadejs","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Optional integration for building advanced interfaces with spreadsheets, calendars, and other components.","package":"jSuites","optional":true}],"imports":[{"note":"ESM default export; CommonJS require is not supported in v5+.","wrong":"const lemonade = require('lemonadejs')","symbol":"lemonade","correct":"import lemonade from 'lemonadejs'"},{"note":"render is a property of the default export, not a named export.","wrong":"import { render } from 'lemonadejs'","symbol":"lemonade.render","correct":"import lemonade from 'lemonadejs'; lemonade.render(Component, document.getElementById('root'))"},{"note":"Components must return a function that uses the `render` tag function.","wrong":"function MyComponent() { return `<div>${this.prop}</div>`; }","symbol":"Component Function (self)","correct":"export default function MyComponent() { this.prop = value; return render => render`<div>${this.prop}</div>`; }"}],"quickstart":{"code":"import lemonade from 'lemonadejs';\n\nfunction Counter() {\n  this.count = 0;\n  this.increment = () => { this.count++ };\n  this.decrement = () => { this.count-- };\n  return render => render`\n    <div>\n      <p>Count: ${this.count}</p>\n      <button onclick=\"${this.increment}\">+</button>\n      <button onclick=\"${this.decrement}\">-</button>\n    </div>`;\n}\n\nlemonade.render(Counter, document.getElementById('root'));","lang":"javascript","description":"Demonstrates a simple counter component with two-way data binding and event handling using LemonadeJS."},"warnings":[{"fix":"Use ESM imports: import lemonade from 'lemonadejs'","message":"LemonadeJS v5 dropped CommonJS support. require() will not work.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Define component as: function MyComp() { return render => render`...`; }","message":"Components must return a render function, not a string.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Use onclick=\"${myFunction}\" instead of onclick=\"myFunction()\"","message":"Event handlers using onclick must be pure JavaScript expressions, not strings.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use `this` instead of `self` in :loop templates.","message":"The `self` variable in loops is deprecated in favor of `this` inside the loop scope.","severity":"deprecated","affected_versions":">=4.0.0 <5.0.0"},{"fix":"Import lemonade: import lemonade from 'lemonadejs'","message":"In v3, the `lemonade` global object was removed for ESM users. Must use imports.","severity":"breaking","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Use ESM: import lemonade from 'lemonadejs'; or include script tag from CDN.","cause":"Incorrect import or outdated version.","error":"Uncaught TypeError: lemonade.render is not a function"},{"fix":"Ensure component returns: return render => render`...`;","cause":"Component did not return a render function.","error":"Uncaught ReferenceError: render is not defined"},{"fix":"Initialize properties with `this.prop = value` inside the component function.","cause":"Using `this` inside a component without proper binding or outside component context.","error":"TypeError: Cannot read properties of undefined (reading 'count')"},{"fix":"Ensure the bound variable is an array: this.items = [];","cause":"Loop attribute bound to a non-array value.","error":"Error: :loop expects an array, got object"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}