- Notifications
You must be signed in to change notification settings - Fork20
LemonadeJS is a 7KB reactive JavaScript micro-library offering two-way data binding. It is dependency-free, does not require transpiling, and works with webpack or directly in the browser.
License
lemonadejs/lemonadejs
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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
<scriptsrc="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 testBuild modern applications with lemonadeJS and node.
See this example on StackBlitz
importlemonadefrom"lemonadejs";exportdefaultfunctionApp(){this.count=1;returnrender=>render`<div> <p>You clicked${this.count} times</p> <button>Click me</button> </div>`;}
Simplicity to run in the browser without dependencies, servers, transpiler.
<html><body><divid="root"></div><scriptsrc="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script><script>functionHello(){returnrender=>render`<h1>${this.title}</h1>`;}functionApp(){this.count=1;returnrender=>render`<div> <Hello title="some title" /> <p>You clicked${this.count} times</p> <button>Click me</button> </div>`;}lemonade.render(App,document.getElementById('root'));</script></body></html>
importlemonadefrom"lemonadejs";exportdefaultfunctionComponent(){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.returnrender=>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><divid='root'></div><scriptsrc="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script><script>functionComponent(){consttest=(e)=>{console.log(e);e.preventDefault();}// The property call is added to the observable list when added to the DOMreturnrender=>render`<input type="button" value="Click test"/>`;}// Render the LemonadeJS element into the DOMlemonade.render(Component,document.getElementById('root'));</script></body></html>
<html><body><divid='root'></div><scriptsrc="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script><script>functionApp(){this.disabled=false;consttoggle=()=>{this.disabled=!this.disabled;}returnrender=>render`<> <button>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.
About
LemonadeJS is a 7KB reactive JavaScript micro-library offering two-way data binding. It is dependency-free, does not require transpiling, and works with webpack or directly in the browser.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Contributors10
Uh oh!
There was an error while loading.Please reload this page.