Resonant.js is an open-source lightweight JavaScript framework that enables reactive data-binding for building dynamic and responsive web applications. It simplifies creating interactive UIs by automatically updating the DOM when your data changes.
- Reactive Data Binding: Automatically synchronize your data with the UI.
- Dynamic List Rendering: Easily render lists that react to data changes.
- Bidirectional Input Binding: Bind HTML input fields directly to your data model.
- Efficient Conditional Updates: Only evaluate conditional expressions tied to specific variable changes.
- Lightweight and Easy to Integrate: Minimal setup required to get started.
To install via NPM, use the following command:
npm i resonantjsTo use via CDN, include the following URLs in your HTML file:
<script src="https://unpkg.com/resonantjs@latest/resonant.js"></script>
Include resonant.js in your HTML file, and use the following example to understand how to integrate it into your web application.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Resonant.js Basic Example</title>
<script src="https://unpkg.com/resonantjs@latest/resonant.js"></script>
</head>
<body>
<h1>Resonant.js Basic Example</h1>
<div>
<h2>Counter</h2>
<p>Current count: <span res="counter"></span></p>
<button onclick="counter++">Increment Counter</button>
</div>
<script>
const resonantJs = new Resonant();
resonantJs.add("counter", 0);
</script>
</body>
</html>-
resandres-propAttributes: Bind HTML elements to your data model seamlessly.-
resis used to identify an overarching data model. -
res-proplinks individual properties within that model to corresponding UI elements.
-
-
res-displayAttribute: Conditionally display elements based on the data model's properties. -
res-onclickAttribute: Triggers a function when an element is clicked, allowing for custom event handling. -
res-onclick-removeAttribute: Removes an item from an array when the associated element is clicked. -
res-styleAttribute: Dynamically update CSS styles based on data model properties. - Automatic UI Updates: Changes to your JavaScript objects instantly reflect in the associated UI components, reducing manual DOM manipulation.
- Dynamic Arrays and Objects: Easily handle collections and nested objects to dynamically add or remove elements based on your data structures.
- Event Callbacks: Register custom functions to execute whenever your data model changes.
- Bidirectional Input Binding: Bind form input fields directly to your data, making two-way synchronization simple.
- Optional Persistent Data: Save your data model to local storage for easy retrieval and persistence across sessions.
- The demo HTML file uses the Pico CSS framework for styling. You can find more information about Pico CSS here.
Resonant.js is released under the MIT License. You can find a copy of the MIT License in the LICENSE file included with the package.