SensibleJS

SensibleJS is a lightweight reactive UI library designed for simplicity and efficiency, providing a functional approach to building interactive user interfaces without the need for a build step, virtual DOM, or external dependencies. This library utilizes plain HTML attributes to bind data directly to the Document Object Model (DOM), facilitating a clean and intuitive development experience.

Key Features:

• Compact Size: At approximately 10KB, SensibleJS ensures quick load times and minimal overhead.

• Two-Way Data Binding: Easily connect input fields and display elements with the s-bind directive for seamless data updates. For example:

  <input s-bind="name" placeholder="Your name">
  <p s-bind="name">Hello, {name}!</p>
  

• Configuration with Minimal Setup: Define a reactive data store directly in your HTML without complex initialization calls. SensibleJS automatically detects and binds data:

  <script>
  let store = {
      data: {
          name: { type: String, default: '' },
          count: { type: Number, default: 0 }
      }
  };
  </script>
  

• Dynamic Directives for Interactivity: Utilize directives like s-if, s-for, and s-click to create dynamic, interactive components without cumbersome boilerplate:

  <button s-click="count++">Clicked <span s-bind="count">{count}</span> times</button>
  <div s-if="count > 0">Count is greater than zero.</div>
  

• Rich Variable and Data Types: Supports various types including strings, numbers, arrays, and objects, ensuring flexibility for diverse use cases.

• Automatic Persistence: Maintain state across page refreshes with built-in local storage support.

• Security and Performance: All expressions are evaluated in a safe, sandboxed scope, protecting against potential security risks.

• Modern Browser Support: Fully compatible with the latest versions of major web browsers, excluding Internet Explorer 11.

For everyday applications, SensibleJS blends power with simplicity, allowing for rapid development of dynamic web applications. Detailed documentation, including directive explanations and examples, can be found in the repository, empowering developers to quickly adapt and implement this innovative framework in their projects.