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.