LemonadeJS: Micro Reactive JavaScript Library

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

!Micro Library

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

$3

bash

% npm install lemonadejs

$3

html

$3



% npx @lemonadejs/create myApp


% cd myApp


% npm run start

$3



% npm run test





Examples



$3



Build modern applications with lemonadeJS and node.



See this example on StackBlitz

javascript

import lemonade from "lemonadejs";



export default function App() {

  this.count = 1;

  return render => render

You clicked ${this.count} times

;

}





$3



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

html

$3

javascript

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

Title	Description
{{self.title}}	{{self.description}}

;

}

$3

html

$3

html

License

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

Learning LemonadeJS

$3

* Getting started
* Upgrades
* Quick reference
* Changelog
* Introduction
* Components
* Props
* Events
* Onload
* Onchange
* State
* References
* Ready
* Two-way data binding
* Render
* Forms
* Arrays
* Sugar
* Testing
* Methods
* Classes
* Web-components
* Module (ESM

$3

* 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.

$3

Other tools

- JavaScript Components
- JavaScript Data Grid
- Free JavaScript Data Grid

LemonadeJS: Micro Reactive JavaScript Library

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

Installation

$3

bash

% npm install lemonadejs

$3

html

$3



% npx @lemonadejs/create myApp


% cd myApp


% npm run start

$3



% npm run test





Examples



$3



Build modern applications with lemonadeJS and node.



See this example on StackBlitz

javascript

import lemonade from "lemonadejs";



export default function App() {

  this.count = 1;

  return render => render

You clicked ${this.count} times

;

}





$3



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

html

$3

javascript

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

Title	Description
{{self.title}}	{{self.description}}

;

}

$3

html

$3

html

License

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

Learning LemonadeJS

$3

Other tools

- JavaScript Components
- JavaScript Data Grid
- Free JavaScript Data Grid

lemonadejs

LemonadeJS: Micro Reactive JavaScript Library

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

Installation

$3

$3

$3

$3

Examples

$3

$3

$3

$3

$3

License

Learning LemonadeJS

$3

$3

$3

Other tools

lemonadejs

LemonadeJS: Micro Reactive JavaScript Library

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

Installation

$3

$3

$3

$3

Examples

$3

$3

$3

$3

$3

License

Learning LemonadeJS

$3

$3

$3

Other tools

Dist Tags