Attractive.js 1.0.0: interactive HTML without one line of JavaScript

JavaScript library Attractive.js version 1.0.0 has been released, offering interactive HTML without any lines of JavaScript code. The library provides a set of declarative HTML actions that can be placed directly on the element, removing the need for virtual DOM, state management, and component lifecycle. With Attractive.js, developers can create custom actions, use addons like keyboard, reactive, validate, and attract, and even write custom elements.

The library also introduces a new syntax, with actions moved from data-action and data-target to @action and @target. Several interactions like class and attribute toggling, style changes, copy-to-clipboard, confirm dialogs, focus, form submit and reset, scrolling, and more are covered out of the box. In addition, triggers and gates can control when the actions run, such as :mounted (immediate), :whenVisible (scroll into view), :once (single run), and :preventDefault (event.preventDefault()).

To showcase the capabilities of Attractive.js, the library provides examples of components like copy buttons, dialogs, auto-save form data with debounce, tabs, accordions, toasts, and carousels. The full build size is approximately 7 KB (gzipped) and the core engine is under 5 KB, making it lightweight compared to frameworks. The JavaScript library can be used on static sites or for server-rendered apps, and developers can even replace bulky toggle_class_controller.js with Attractive.js.