lemonadejs
Advanced tools
Lemonade is a lightweight, micro reactive vanilla javascript library to create quick and reusable JS components without dependencies.
Lemonadejs is a super lightweight reactive vanilla javascript micro-library (5Kb). It aims to help the integration between the JavaScript (controllers) and the HTML (view). It supports two-way binding and integrates natively with jSuites to help to create amazing interfaces quicker.
It would help you deliver reusable components and does not require transpilers, babel, or hundreds of other dependencies. It works just fine in any javascript dev environment. LemonadeJS has a quick learning curve and keeps coding fun and very close to native JS.
Build modern applications with lemonadeJS and node.
See this example on codesandbox
import lemonade from "lemonadejs";
import Hello from "./Hello";
export default function App() {
let self = {};
self.count = 1;
let template = `<div>
<div><Hello /></div>
<p>You clicked {{self.count}} times</p>
<button onclick="self.count++;">Click me</button>
</div>`;
return lemonade.element(template, self, { Hello });
}
Simplicity to run in the browser without dependencies, servers, transpilers.
<html>
<script src="https://lemonadejs.net/v1/lemonade.js"></script>
<div id="root"></div>
<script>
function Hello() {
let self = {};
let template = `<h1>Hello World</h1>`;
return lemonade.element(template, self);
}
function App() {
let self = {};
self.count = 1;
let template = `<div>
<div><Hello /></div>
<p>You clicked {{self.count}} times</p>
<button onclick="self.count++;">Click me</button>
</div>`;
return lemonade.element(template, self, { Hello });
}
lemonade.render(App, document.getElementById('root'));
</script>
</html>
import lemonade from "lemonadejs";
export default function Component() {
let self = {};
self.rows = [
{ title:'Google', description: 'The alpha search engine...' },
{ title:'Bind', 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.
let template = `<table cellpadding="6">
<thead><tr><th>Title</th><th>Description</th></th></thead>
<tbody @loop="self.rows">
<tr><td>{{self.title}}</td><td>{{self.description}}</td></tr>
</tbody>
</table>`;
return lemonade.element(template, self);
}
% npm install lemonadejs
This software is free to use and it is distributed under the MIT license.
https://jsuites.net
https://jspreadsheet.com
https://bossanova.uk/jspreadsheet
FAQs
Lemonade is a lightweight, micro reactive JavaScript library to create quick and reusable reactive JS components. No dependencies or transpile is require
The npm package lemonadejs receives a total of 1,165 weekly downloads. As such, lemonadejs popularity was classified as popular.
We found that lemonadejs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.