LemonadeJS

LemonadeJS v5 is a lightweight, micro-reactive JavaScript library for building platform-agnostic components. With just 5.5KB compressed and zero dependencies, it delivers high performance and flexibility through an abstract reactive layer on top of your favorite framework. Build anything from simple components to complex web applications using pure JavaScript, TypeScript, or JSX, powered by two-way data binding, component communication, and built-in hooks.

Installation

Start using the reactive LemonadeJS library by choosing one of the following installation methods that best fit your project’s requirements:

NPM Package

For those integrating LemonadeJS using NPM:

npm install lemonadejs@5

CDN

Add LemonadeJS to your HTML files directly by including the following script tag:

lemonade.min

<script src="https://cdn.jsdelivr.net/npm/lemonadejs@5/dist/lemonade.min.js"></script>

Create a New App From the Command Line

Quick start

Get started with LemonadeJS by creating a new project:

# Create a new project
npx @lemonadejs/create my-app

# Navigate to project directory
cd my-app

# Start development server
npm run dev

JS Example

<html>
<script src="https://lemonadejs.com/v5/lemonade.js"></script>
<div id='root'></div>
<script>
function Hello() {
    this.count = 0;
    // Count down every second
    setInterval(() => {
        this.count++;
    }, 1000);
    // Component template
    return render => render`<p>Count: ${this.count}</p>`;
}
lemonade.render(Hello, document.getElementById('root'));
</script>
</html>

Lemonade Example

import lemonade from 'lemonadejs';

export default function Hello() {
    this.count = 0;
    // Count down every second
    setInterval(() => {
        this.count++;
    }, 1000);
    // Component template
    return render => render`<p>Count: ${this.count}</p>`;
}