LemonadeJS quick reference

Quick reference

All you need to know in one page

What it is

LemonadeJS is a micro library (Less than 4Kbytes) but still a very powerful library. In this page you can find the most important concept and aspects to learn and start using lemonadejs.

The self object

The self is a common lemonade object that contains properties and methods that can be invoked from the template making very easy to create highly dynamic elements.

Special properties

There are three special properties in lemaondeJS, those are:

  • @ref: assign a reference of an HTML tag to property in the JavaScript lemonadejs self object.
  • @bind: bind the value of an HTML element to a variable in JavaScript lemonadejs self object and create an onchange event to keep the self property always updated.
  • @ready: call a method as soon the element is ready on the DOM.


There are four methods to help to create the lemandejs components as below:

  • lemonade.apply(self, DOMElement) bind a new self to an existing elements in the DOM.
  • lemonade.template(template, self) create a new HTML element from a template and make the self available in the template.
  • lemonade.render(DOMElement, DOMElement) append a lemanodejs element to an existing DOM element available.
  • lemonade.blender(template, self, DOMElement) create a new lemonadejs component based on the template, bind the self to this new element and append that to an existing DOM element.


There are two native events to help interect with lemonade components as follow:

  • self.onload(component) It happens when the component is ready and mounted.
  • self.onchange(property, affected) It happens when a property of the self is changed.

Learning examples

Basic examples

Advanced examples

Extensions using LemonadeJS