LemonadeJS: Micro Reactive JavaScript Library

Create amazing web-based interfaces and framework-agnostic components with LemonadeJS

LemonadeJS is a super lightweight, reactive, vanilla JavaScript micro-library (7 KB). It helps integrate JavaScript (controllers) with HTML (view) through two-way data binding. It also integrates natively with jSuites to help you build amazing interfaces more quickly.

LemonadeJS enables the creation of reusable components without the need for a transpiler, Babel, or dozens of dependencies. It works seamlessly in any JavaScript development environment. With a fast learning curve, LemonadeJS keeps coding enjoyable and stays close to native JavaScript.

Build rich and user-friendly web interfaces and applications
Handle complex data inputs with ease
Enhance the software user experience
Create rich CRUD interfaces and beautiful UIs
Highly flexible and customizable
Lightweight and simple to use

Installation

NPM package

% npm install lemonadejs

Using from CDN

<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>

Create a LemonadeJS sample app

% npx @lemonadejs/create myApp<br>
% cd myApp<br>
% npm run start<br>

Running tests

% npm run test

Examples

Webpack

Build modern applications with lemonadeJS and node.

See this example on StackBlitz

import lemonade from "lemonadejs";

export default function App() {
  this.count = 1;
  return render => render`<div>
        <p>You clicked ${this.count} times</p>
        <button onclick="${()=>this.count++}">Click me</button>
  </div>`;
}

Browser

Simplicity to run in the browser without dependencies, servers, transpiler.

<html>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script>
function Hello() {
    return render => render`<h1>${this.title}</h1>`;
}

function App() {
  this.count = 1;
  return render => render`<div>
        <Hello title="some title" />
        <p>You clicked ${this.count} times</p>
        <button onclick="${()=>this.count++}">Click me</button>
  </div>`;
}
lemonade.render(App, document.getElementById('root'));
</script>
</body>
</html>

Creating a table from an array of objects

import lemonade from "lemonadejs";

export default function Component() {
    this.rows = [
        { title:'Google', description: 'The alpha search engine...' },
        { title:'Bing', description: 'The microsoft search engine...' },
        { title:'Duckduckgo', description: 'Privacy in the first place...' },
    ];

    // Custom components such as List should always be unique inside a real tag.
    return render => render`<table cellpadding="6">
        <thead><tr><th>Title</th><th>Description</th></th></thead>
        <tbody :loop="${this.rows}">
            <tr><td>{{self.title}}</td><td>{{self.description}}</td></tr>
        </tbody>
    </table>`;
}

The event object

<html>
<body>
<div id='root'></div>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script>
function Component() {
    const test = (e) => {
        console.log(e);
        e.preventDefault();
    }
    // The property call is added to the observable list when added to the DOM
    return render => render`<input type="button" value="Click test" onclick="${test}"/>`;
}

// Render the LemonadeJS element into the DOM
lemonade.render(Component, document.getElementById('root'));
</script>
</body>
</html>

Enable/disable HTML elements

<html>
<body>
<div id='root'></div>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script>
function App() {
    this.disabled = false;
    const toggle = () => {
        this.disabled = !this.disabled;
    }
    return render => render`<>
      <button onclick="${toggle}">Toggle</button>
      <input type="text" disabled="${this.disabled}" />
    </>`;
}
lemonade.render(App, document.getElementById('root'));
</script>
</body>
</html>

License

This software is free to use, and it is distributed under the MIT license.

Learning LemonadeJS

Documentation

Libraries

JavaScript Lists with Search and Pagination: Create a list of elements from an array based on a given template, including search and pagination.
JavaScript Rating: A micro JavaScript star rating plugin.
JavaScript Router: Create a JavaScript single-page application with routes using LemonadeJS.
Signature Pad: A JavaScript Signature pad using LemonadeJS.
JavaScript Data Grid : A micro (5KBytes) JavaScript Data Grid with search, pagination, sorting.
JavaScript Modal : Create advance resizable, draggable, closable or minimizable modals.
JavaScript Calendar : JavaScript date picker with range selection and much more.
JavaScript Dropdown : Highly performance autocomplete dropdown with groups, images, and much more.
JavaScript Color picker : Simple javascript color picker.
JavaScript Timeline : JavaScript timeline with grouping and other other customizable visual attributes.
JavaScript Context Menu : JavaScript responsive context menu.
JavaScript Tabs : Simple javascript tabs component.
JavaScript Image cropper : A linkedin-style photo cropper.
JavaScript Switch: A lightweight reactive switch button.
JavaScript Top Menu: A lightweight reactive top menu.

Examples

Other tools