{"id":14990129,"url":"https://github.com/lemonadejs/lemonadejs","last_synced_at":"2025-05-14T23:06:35.239Z","repository":{"id":42975300,"uuid":"304563696","full_name":"lemonadejs/lemonadejs","owner":"lemonadejs","description":"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.","archived":false,"fork":false,"pushed_at":"2025-05-08T19:06:48.000Z","size":816,"stargazers_count":415,"open_issues_count":3,"forks_count":17,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-05-08T21:16:13.956Z","etag":null,"topics":["framework","javascript","micro-framework","micro-frameworks","micro-library","microfrontend","reactive","two-way-binding","two-way-data-binding","ui","vanilla-js","web-component","web-components","web-components-library"],"latest_commit_sha":null,"homepage":"https://lemonadejs.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lemonadejs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-10-16T08:18:30.000Z","updated_at":"2025-05-08T19:06:51.000Z","dependencies_parsed_at":"2024-11-29T03:00:35.728Z","dependency_job_id":"36cd5de4-3f69-4cac-938c-09a6be62c243","html_url":"https://github.com/lemonadejs/lemonadejs","commit_stats":{"total_commits":343,"total_committers":12,"mean_commits":"28.583333333333332","dds":0.5918367346938775,"last_synced_commit":"19e383470ebd9c9d9f4700b7a71c03bfee3ce1c3"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemonadejs%2Flemonadejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemonadejs%2Flemonadejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemonadejs%2Flemonadejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemonadejs%2Flemonadejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lemonadejs","download_url":"https://codeload.github.com/lemonadejs/lemonadejs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254243360,"owners_count":22038046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framework","javascript","micro-framework","micro-frameworks","micro-library","microfrontend","reactive","two-way-binding","two-way-data-binding","ui","vanilla-js","web-component","web-components","web-components-library"],"created_at":"2024-09-24T14:19:32.462Z","updated_at":"2025-05-14T23:06:30.223Z","avatar_url":"https://github.com/lemonadejs.png","language":"JavaScript","readme":"# LemonadeJS v4: Reactive micro library\n\n## Create amazing web-based interfaces with LemonadeJS\n\n![Micro Library](https://lemonadejs.com/templates/default/img/lemonadejs-home.jpg)\n\nLemonadeJS is a super lightweight reactive vanilla javascript micro-library (7 KBytes). It helps to integrate the JavaScript (controllers) and the HTML (view). It supports two-way data binding and integrates natively with jSuites to help to create amazing interfaces quicker.\u003cbr\u003e\u003cbr\u003e\n\nIt would help you deliver reusable components and does not require transpiler, babel, or hundreds of other dependencies. It works just fine in any javascript dev environment. LemonadeJS has a quick learning curve, keeps coding fun, and is very close to native JS.\n\n- Make rich and user-friendly web interfaces and applications\n- Handle complicated data inputs with ease and convenience\n- Improve the software user experience\n- Create rich CRUDS and beautiful UI\n- Highly flexible and customizable\n- Lightweight and simple to use\n\n\n## Installation\n\n### NPM package\n\n```bash\n% npm install lemonadejs\n```\n\n### Using from CDN\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js\"\u003e\u003c/script\u003e\n```\n\n### Create a LemonadeJS sample app\n\n```\n% npx @lemonadejs/create myApp\u003cbr\u003e\n% cd myApp\u003cbr\u003e\n% npm run start\u003cbr\u003e\n```\n\n### Running tests\n\n```\n% npm run test\n```\n\n## Examples\n\n### Webpack\n\nBuild modern applications with lemonadeJS and node.\n\n[See this example on codesandbox](https://codesandbox.io/s/reactive-micro-library-ny99bk)\n\n```javascript\nimport lemonade from \"lemonadejs\";\nimport Hello from \"./Hello\";\n\nexport default function App() {\n  let self = this;\n  self.count = 1;\n  return `\u003cdiv\u003e\n        \u003cdiv\u003e\u003cHello /\u003e\u003c/div\u003e\n        \u003cp\u003eYou clicked {{self.count}} times\u003c/p\u003e\n        \u003cbutton onclick=\"self.count++;\"\u003eClick me\u003c/button\u003e\n  \u003c/div\u003e`;\n}\n```\n\n### Browser\n\nSimplicity to run in the browser without dependencies, servers, transpiler.\u003cbr\u003e\n\n```html\n\u003chtml\u003e\n\u003cbody\u003e\n\u003cdiv id=\"root\"\u003e\u003c/div\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nfunction Hello() {\n    let self = this;\n    return `\u003ch1\u003e{{self.title}}\u003c/h1\u003e`;\n}\n\nfunction App() {\n    let self = this;\n    self.count = 1;\n    return `\u003c\u003e\n      \u003cHello title=\"your title\" /\u003e\n      \u003cp\u003eYou clicked {{self.count}} times\u003c/p\u003e\n      \u003cbutton onclick=\"self.count++;\"\u003eClick me\u003c/button\u003e\n    \u003c/\u003e`;\n}\nlemonade.render(App, document.getElementById('root'));\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Creating a table from an array of objects\n\n```javascript\nimport lemonade from \"lemonadejs\";\n\nexport default function Component() {\n    let self = this;\n\n    self.rows = [\n        { title:'Google', description: 'The alpha search engine...' },\n        { title:'Bing', description: 'The microsoft search engine...' },\n        { title:'Duckduckgo', description: 'Privacy in the first place...' },\n    ];\n\n    // Custom components such as List should always be unique inside a real tag.\n    return `\u003ctable cellpadding=\"6\"\u003e\n        \u003cthead\u003e\u003ctr\u003e\u003cth\u003eTitle\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\u003c/th\u003e\u003c/thead\u003e\n        \u003ctbody @loop=\"self.rows\"\u003e\n            \u003ctr\u003e\u003ctd\u003e{{self.title}}\u003c/td\u003e\u003ctd\u003e{{self.description}}\u003c/td\u003e\u003c/tr\u003e\n        \u003c/tbody\u003e\n    \u003c/table\u003e`;\n}\n```\n\n### The event object\n\n```html\n\u003chtml\u003e\n\u003cbody\u003e\n\u003cdiv id='root'\u003e\u003c/div\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nfunction Component() {\n    // Create the self object\n    let self = this;\n    self.test = function(e) {\n        console.log(e);\n        e.preventDefault();\n    }\n    // The property call is added to the observable list when added to the DOM\n    return `\u003cinput type=\"button\" value=\"Click test\" onclick=\"self.test(e);\"/\u003e`;\n}\n\n// Render the LemonadeJS element into the DOM\nlemonade.render(Component, document.getElementById('root'));\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Enable/disable HTML elements\n\n```html\n\u003chtml\u003e\n\u003cbody\u003e\n\u003cdiv id='root'\u003e\u003c/div\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nfunction App() {\n    let self = this;\n    self.disabled = false;\n    return `\u003c\u003e\n      \u003cbutton onclick=\"self.disabled = !self.disabled\"\u003eToggle\u003c/button\u003e\n      \u003cinput type=\"text\" disabled=\"{{self.disabled}}\" /\u003e\n    \u003c/\u003e`;\n}\nlemonade.render(App, document.getElementById('root'));\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Reactive Web Components\n\n```html\n\u003chello-element title=\"Hello world\" /\u003e\n```\n\n```javascript\nclass HelloElement extends HTMLElement {\n    constructor() {\n        super();\n    }\n \n    render() {\n        let self = this;\n        return `\u003c\u003e\n            \u003ch1\u003e{{self.title}}\u003c/h1\u003e\n            \u003cinput type=\"button\" value=\"setTitle()\"\n                onclick=\"self.title = 'Test'\" /\u003e\n        \u003c/\u003e`;\n    }\n \n    connectedCallback() {\n        if (! this.el) {\n            lemonade.render(this.render, this, this);\n        }\n    }\n}\n \nwindow.customElements.define('hello-element', HelloElement);\n```\n\n\n## License\n\nThis software is free to use, and it is distributed under the MIT license.\n\n## Learning LemonadeJS\n\n### Documentation\n\n* [Getting started](https://lemonadejs.com/docs/getting-started)\n* [Attributes](https://lemonadejs.com/docs/attributes)\n* [Two-way binding](https://lemonadejs.com/docs/two-way-binding)\n* [Arrays](https://lemonadejs.com/docs/arrays)\n* [Methods](https://lemonadejs.com/docs/methods)\n* [Events](https://lemonadejs.com/docs/events)\n* [Components](https://lemonadejs.com/docs/components)\n* [Classes](https://lemonadejs.com/docs/classes)\n* [Web components](https://lemonadejs.com/docs/web-components)\n* [Quick reference](https://lemonadejs.com/docs/quick-reference)\n* [Debugging](https://lemonadejs.com/docs/debugging)\n* [Contributing](https://lemonadejs.com/docs/contributions)\n\n\n### Utilities\n\n* [Awesome](https://lemonadejs.com/docs/awesome)\n* [Sugar](https://lemonadejs.com/docs/sugar)\n* [Testing](https://lemonadejs.com/docs/tests)\n* [Plugins](https://lemonadejs.com/docs/plugins)\n* [Module (ESM)](https://lemonadejs.com/docs/module)\n\n\n### Libraries\n\n* [JavaScript List](https://lemonadejs.com/docs/plugins/list)\n* [JavaScript Rating](https://lemonadejs.com/docs/plugins/rating)\n* [JavaScript Router](https://lemonadejs.com/docs/plugins/router)\n* [JavaScript Signature](https://lemonadejs.com/docs/plugins/signature)\n* [JavaScript Data grid](https://lemonadejs.com/docs/plugins/data-grid)\n* [JavaScript Image Cropper](https://lemonadejs.com/docs/plugins/image-cropper)\n* [JavaScript Modal](https://lemonadejs.com/docs/plugins/modal)\n* [JavaScript Tabs](https://lemonadejs.com/docs/plugins/tabs)\n* [JavaScript Calendar](https://lemonadejs.com/docs/plugins/calendar)\n* [JavaScript Color picker](https://lemonadejs.com/docs/plugins/color-picker)\n\n\n### Examples\n\n* [Lamp](https://lemonadejs.com/docs/examples/lamp\"\u003e)\n* [Counter](https://lemonadejs.com/docs/examples/counter\"\u003e)\n* [Color generator](https://lemonadejs.com/docs/examples/color-generator\"\u003e)\n* [Value persistence](https://lemonadejs.com/docs/examples/value-persistence\"\u003e)\n* [DIV onresize](https://lemonadejs.com/docs/examples/div-onresize\"\u003e)\n* [Star rating](https://lemonadejs.com/docs/examples/rating\"\u003e)\n* [Table](https://lemonadejs.com/docs/examples/table\"\u003e)\n* [Disable elements](https://lemonadejs.com/docs/examples/enable-disable-elements\"\u003e)\n* [Color picker](https://lemonadejs.com/docs/examples/color-picker\"\u003e)\n* [Hangman game](https://lemonadejs.com/docs/examples/hangman\"\u003e)\n* [Tic tac toe](https://lemonadejs.com/docs/examples/tic-tac-toe\"\u003e)\n\n\n## Other tools\n\n- [JavaScript Components](https://jsuites.net/)\n- [JavaScript Data Grid](https://jspreadsheet.com/)\n- [Free JavaScript Data Grid](https://bossanova.uk/jspreadsheet/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemonadejs%2Flemonadejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flemonadejs%2Flemonadejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemonadejs%2Flemonadejs/lists"}