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
% npm install lemonadejs
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
% npx @lemonadejs/create myApp<br>
% cd myApp<br>
% npm run start<br>
% npm run test
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>`; }
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>
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>`; }
<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>
<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>
This software is free to use, and it is distributed under the MIT license.
- 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
- 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.