Agnostic Micro Reactive JavaScript Library
LemonadeJS is a dependency-free lightweight library featuring an abstract reactive layer and two-way data binding. It enables the creation of modern platform-agnostic components using pure JavaScript, JSX, or TypeScript.
Why Use LemonadeJS?
LemonadeJS ensures efficiency, speed, and clarity in your code. It facilitates distribution, standardizes reactivity, and empowers you with full control over your development process. The library is dependency-free, allowing you to decide if you want to use transpiling or external dependencies.
1k+
Weekly downloads
400+
Github stars
MIT License
Free and open-source
Freedom to Develop Your Way
Whether you prefer the simplicity of JavaScript Browser, the robust type-checking of TypeScript, or the modern syntax of JSX, LemonadeJS supports it all. Designed to adapt to your workflow, the library ensures flexibility without sacrificing performance or compatibility.
Built for Modern Web Applications
Designed to be lightweight, framework-agnostic, and highly flexible, this library fits seamlessly into your stack and streamlines development from prototype to production.
Lightweight
A robust JavaScript library in a compressed package of just 5KB, significantly improving overall load performance.
Agnostic
Integrates with popular frameworks like Vue, React, and Angular without altering your existing architecture.
Flexible
Code in your browser with no dependencies or transpiling required for rapid prototyping and experimentation.
Two-way Data Binding
LemonadeJS enables two-way data binding to synchronize changes between a component property and its corresponding HTML element value seamlessly.
Input Text
The :bind directive creates a transparent event that keeps the {self} property consistently in sync with the value of the text input.
Checkboxes
The :bind directive links the checkbox state to the {self} property, automatically updating the component whenever the user toggles the checkbox.
Radio
On a radio HTML element, using self binds the selected option to the {self} property, ensuring it always reflects the current radio value.
import { set, dispatch } from 'lemonadejs';
export default function Profile() {
// Register this action and make it available on the global scope
set('updateName', (s) => {
this.name = s.name;
});
// Counter is created from the attribute counter
return render => render`<form>
<label>Name:</label><br/>
<input type="text" :bind="${this.name}" /><br/>
</form>`;
}
Sugar (Super global artifacts)
Sugar is a communication system in LemonadeJS that enables components to share data and actions using a pub/sub pattern. Components subscribe to named events with set, defining global actions or state updates, and trigger updates with dispatch, ensuring seamless synchronization and reactivity across the application.
When an action is available, you can execute it anywhere in your application using the dispatch method.
Components
A component provides a powerful solution for crafting reusable functionalities. This section outlines the essential considerations for developing your custom components within LemonadeJS.
JavaScript Data Grid
A solution for rendering data in rows and columns. It offers features like search, filter, pagination, and in-cell editing, making it ideal for building complex interfaces.
JavaScript Modal
Create dynamic floating modals. It offers flexible configuration options, enabling features such as draggability, closability, and resizability to meet requirements.
JavaScript Calendar
Create a user-friendly date picker. Utilize event handling to integrate seamlessly with your application’s functionality, ensuring a smooth user experience.
JavaScript Dropdown
A lightweight, high-performance JavaScript plugin with a reactive design. This component provides various configurable options for creating flexible interfaces.
JavaScript Color Picker
Create an interactive color picker for applications. It includes a palette, a gradient selector, and event handling, and integrates smoothly with modern frameworks.
JavaScript Timeline
Create interactive timelines for logs, events, and roadmaps. It offers customizable colors, content, and points, with navigation controls to organize and display chronological data.
Javascript Components
Explore the powerful and versatile components designed to elevate your productivity. From data management to collaboration, our ecosystem seamlessly integrates to meet your needs.
Jspreadsheet Pro
An enterprise JavaScript data grid component to integrate spreadsheet UI into your web-based application.
Intrasheets
Collaborate using Intrasheets, an intuitive tool for managing spreadsheets and keeping everyone aligned.
Subscribe to our newsletter
Tech news, tips and technical advice