Create amazing JavaScript reactive applications.
LemonadeJS is a free reactive javascript micro-library (about 6 KBytes). It enhances the integration between the JavaScript (controllers) and the HTML (view). It supports two-way data binding and helps you to deliver great reusable components.
Build modern application using webpack or choose to run direct in the browser without dependencies or transpile.

Modern interfaces
Build modern application using webpack or simple coding direct in the browser without dependencies or transpiling.
import lemonade from "lemonadejs"; import Hello from "./Hello"; export default function App() { let self = {}; self.count = 1; let template = `<> <Hello /> <p>You clicked {{self.count}} times</p> <button onclick="self.count++;">Click me</button> </>`; return lemonade.element(template, self, { Hello }); }
Simplicity
Run LemonadeJS in your browser without dependencies or transpiling.
Flexibility
- Integrate LemonadeJS on top of any existing application without changing architecture.
- Adopt LemonadeJS to specific sections of an existing applications.
- Create two-way data binding sections to specific block of the DOM application.
Properties
- Two-way data binding
- Lightweight (7KB)
- Reactive interfaces
- Great user experience
- Webpack or directly in the browser
- No dependencies
<html> <script src="https://lemonadejs.net/v2/lemonade.js"></script> <div id="root"></div> <script> var Hello = (function() { // Receive the properties from the parent var self = this; let template = `<div>You clicked {{self.number}} times</div>`; return lemonade.element(template, self); }); var App = (function() { var self = { count: 0, }; // Number is a reference to count in this scope let template = `<div> <Hello number="{{self.count}}" /> <button onclick="self.count++">Plus 1</button> <button onclick="self.count--">Minus 1</button> </div>`; return lemonade.element(template, self, { Hello }); }); lemonade.render(App, document.getElementById('root')); </script> </html>
Installation
% npm install lemonadejsOr download from our Github Official
New concepts
The Pico Library
The Pico Library brings javascript common components. Each component in the library does not require any dependency and has a limit of 2 kBytes each.Sugar (Super Global Artifacts)
The LemonadeJS Sugar is a common global container that makes easier communication between different components.Roadmap
LemonadeJS v2.9.0
- Partial properties value update, for example: class="something {{self.somethingElse}}"
- Better deal with tag and textNodes {{self.something}} as a text node along a tag
History
LemonadeJS v2.8.9
- self.refresh to rebuild the component keeping the self state.
- Special attribute @src + default property
- Support closing tags for webcomponents
- Self attributes from classes
LemonadeJS v2.7.2
- lm-ready, lm-loop, lm-ref, lm-bind alternative for @ready, @loop, @ref, @bind
- Components are now case insensitive
- A new simple @bind for custom components
LemonadeJS v2.4.2
- lemonade.dictionary, lemonade.translate. (text translation support)
- run evaluation method
LemonadeJS v2.2.4
- The event object (e) is available on the template, example. onclick="self.test(e)"
LemonadeJS v2.2.0
- Support for tables
LemonadeJS v2.1.13
- @loop on native HTML tags.
- Precedence for val() on setAttributes
- self.parent as reserved property to get the self of the a caller inside custom elements
LemonadeJS v2.1.7
- Global queue
- Pico Library
- Sugar Common Container
self.el
as a reserved property which returns the root element- Real time templates for custom elements.
- Extensions and template to the children on custom components
LemonadeJS v2.0.6
- @loop property
- Better integration with components
- Custom component templating
LemonadeJS v1.0.0
- @bind, @ready, @ref magic properties.
Copyright and license
LemonadeJS is released under the MIT license. Contact LemonadeJSAbout LemonadeJS
The LemonadeJS is an original micro reactive JavaScript software created to facilitate the integration between the HTML, data, and JavaScript methods in web-based development. It is an efficient and flexible way for building user interfaces. It brings the development as close to the JavaScript vanilla as possible. It has some smart concepts and a powerful optimization that offers a straightforward learning curve. The developer would have the flexibility to extend the development to the browser environment but continue building modern, complex UIs and reusable components.On the most release, it brings new concepts such as SUGAR (Super Global Artifacts) which is a common container to simplify the communication between components. And PICO is the official component library without dependencies up to 2 KBytes.