Easy - Controllers

Easy Controllers is a collection of Stimulus controllers that provide reusable UI building blocks and utility elements, designed to complement frameworks like Bootstrap and Tailwind.
It includes a consent manager, scroll indicator, skills visualization, team section, animated text, timeline, drag-to-scroll behavior for scrollable elements, and a helper controller for YASL.

🚀 Quick Start

npm:

npm i easy-controllers

jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easy-controllers@latest/dist/easy.min.css">
<script src="https://cdn.jsdelivr.net/npm/easy-controllers@latest/dist/easy.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/easy-controllers@latest/dist/easy-bootstrap.js"></script>

Make sure to have Hotwire Stimulus installed and exported:

<script type="importmap">
  {
    "imports": {
      "@hotwired/stimulus": "path/to/stimulus.js"
    }
  }
</script>

If the import identifier differs from @hotwired/stimulus, you can adjust it in easy-bootstrap.js:

// easy-bootstrap.js
// Change this line to match your setup:
#1 import { Application, Controller } from 'yourStimulusIdentifier';
#2 ...

Example: animated text element

<div
  data-controller="easy-text"
  data-easy-text-template-value="one-blue"
>
  <p>Your custom text</p>
</div>

For in-depth explanations and examples about all available controllers, see the documentation.

Full documentation and examples:

✨ Features

• Consent manager

  Multi-language, template-based consent UI without a database requirement, with configurable categories, texts, and behavior.

• Scroll indicator

  A configurable scroll bar that visualizes the current scroll position of the page or a container, with horizontal and vertical modes.

• Skills visualization

  Multiple templates for skill/progress displays, including CSS- and JS-animated variants (bars and circles), fully configurable via data attributes.

• Team section

  A rich team component that can render headers, images, descriptions, contact methods, and social profiles, driven purely by semantic HTML structure.

• Text animations

  Modern text effects such as realistic typing, filling, revealing, and rotating, with support for looping and reverse animations.

• Timelines

  Different templates to present chronological timelines, controlled by HTML and Stimulus values.

• Drag scroll

  A drag-to-scroll controller that turns any scrollable container into a draggable area (mouse / touch), ideal for carousels and overflowing content.

• YASL helper

  Helper controller to integrate and orchestrate YASL (Yet Another Scroll Library) with Stimulus-based UIs.

📦 Installation & Usage

1. Install the package: npm i easy-controllers
2. Include the JS and CSS files in your page (npm bundler or via CDN).
3. Register Stimulus and the Easy bootstrap file.
4. Bind and configure elements using data-controller and data-easy-* attributes.
5. Configure each element individually via Stimulus values.

Details → Documentation

🤝 Contributing

Issues & PRs: GitHub Repository

📄 License

GPL-2.0-or-later LICENSE