# hotwired/stimulus

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/hotwired-stimulus).**

13,056 stars · 439 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/hotwired/stimulus
- Homepage: https://stimulus.hotwired.dev/
- awesome-repositories: https://awesome-repositories.com/repository/hotwired-stimulus.md

## Description

Stimulus is a JavaScript behavior framework and client-side logic layer used to add interactive behavior to server-rendered HTML. It functions as a system of DOM component controllers that organize JavaScript logic into classes, allowing developers to enhance server-delivered markup without replacing the rendering process with a client-side framework.

The framework uses data attributes to bind JavaScript classes to HTML elements and map DOM events to specific methods through document-level event delegation. It employs a lifecycle manager based on mutation observers to automatically instantiate and tear down controllers as their corresponding HTML elements enter or leave the document.

The project covers client-side component management, DOM event handling, and the mapping of element targets within a controller's scope to maintain local state.

## Tags

### User Interface & Experience

- [JavaScript Component Controllers](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/javascript-component-controllers.md) — Provides a system of JavaScript classes that act as controllers to manage the state and behavior of HTML components.
- [Attribute-Driven Interactivity](https://awesome-repositories.com/f/user-interface-experience/attribute-driven-interactivity.md) — Attaches JavaScript logic to existing HTML elements via data attributes to create interactive interfaces.
- [HTML Behavior Attachment](https://awesome-repositories.com/f/user-interface-experience/behavioral-interaction-toolkits/html-behavior-attachment.md) — Attaches JavaScript logic to existing HTML elements to create interactive interfaces without modifying markup. ([source](https://github.com/hotwired/stimulus/blob/main/package.json))
- [Instance Lifecycle Management](https://awesome-repositories.com/f/user-interface-experience/calendars/instance-lifecycle-management.md) — Manages the initialization and destruction of controllers automatically as DOM elements change.
- [Controller Binding](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/template-engines/data-binding-syntax/html-attribute-bindings/controller-binding.md) — Links JavaScript controller classes to HTML elements using specific data attributes.
- [MutationObserver Lifecycles](https://awesome-repositories.com/f/user-interface-experience/mutationobserver-lifecycles.md) — Automatically instantiates and tears down controllers as elements enter or leave the document using MutationObservers.
- [Component Lifecycle Management](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/component-lifecycle-management.md) — Manages the automatic creation and destruction of controllers as their corresponding elements change in the DOM. ([source](https://github.com/hotwired/stimulus#readme))
- [Stateful Class Components](https://awesome-repositories.com/f/user-interface-experience/stateful-class-components.md) — Uses class-based components to encapsulate local state and manage the behavior of HTML elements.
- [Automatic Element Mapping](https://awesome-repositories.com/f/user-interface-experience/html-element-bindings/automatic-element-mapping.md) — Provides automatic binding of DOM elements to controller properties using data attributes.
- [Interactive Element Registries](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-elements/interactive-element-registries.md) — Tracks and manages the active state of controllers as their elements enter or leave the document. ([source](https://github.com/hotwired/stimulus/blob/main/README.md))
- [DOM Mutation Lifecycles](https://awesome-repositories.com/f/user-interface-experience/lifecycle-management/dom-mutation-lifecycles.md) — Uses MutationObservers to automatically instantiate and destroy controllers as elements enter or leave the document.

### Web Development

- [Server-Rendered Enhancement](https://awesome-repositories.com/f/web-development/rendering-templating/server-side-rendering-utilities/static-html-generators/interactive-html-bootstrapping/server-rendered-enhancement.md) — Enhances server-rendered HTML with client-side interactivity without replacing the server's rendering process.
- [Attribute-Based Directives](https://awesome-repositories.com/f/web-development/attribute-based-directives.md) — Binds JavaScript classes to DOM elements by scanning HTML for custom data attributes.
- [Behavioral JavaScript Frameworks](https://awesome-repositories.com/f/web-development/behavioral-javascript-frameworks.md) — Provides a framework for attaching JavaScript behavior to HTML elements via data attributes.
- [Behavioral Logic Binding](https://awesome-repositories.com/f/web-development/behavioral-logic-binding.md) — Connects JavaScript functions to HTML elements using attributes to handle user interactions. ([source](https://github.com/hotwired/stimulus#readme))
- [DOM & Event Handling](https://awesome-repositories.com/f/web-development/browser-integration-utilities/dom-event-handling.md) — Manages user interactions by mapping DOM events to JavaScript methods via HTML attributes.
- [Client-Side Components](https://awesome-repositories.com/f/web-development/client-side-components.md) — Manages the lifecycle of JavaScript controllers bound to HTML elements on the client side.
- [Client-Side Logic](https://awesome-repositories.com/f/web-development/client-side-logic.md) — Provides a client-side logic layer for adding interactivity to server-rendered HTML.
- [Event Delegation](https://awesome-repositories.com/f/web-development/event-delegation.md) — Uses document-level event delegation to trigger controller methods without per-element listeners.
- [Event Delegation Systems](https://awesome-repositories.com/f/web-development/event-delegation-systems.md) — Maps DOM events to controller methods via centralized event bubbling listeners.
- [Data Attribute Event Mapping](https://awesome-repositories.com/f/web-development/event-delegation/data-attribute-event-mapping.md) — Implements document-level event delegation that maps HTML data attributes to specific controller methods.
- [Progressive Enhancement Frameworks](https://awesome-repositories.com/f/web-development/progressive-enhancement-frameworks.md) — Adds interactive client-side behavior to server-rendered HTML without replacing the rendering process.
- [Server-Rendered Page Enhancement](https://awesome-repositories.com/f/web-development/server-side-rendering/server-rendered-page-enhancement.md) — Adds modest client-side interactivity to HTML delivered from a server without requiring a full SPA framework.
- [Automatic Element Target Mapping](https://awesome-repositories.com/f/web-development/dom-element-selectors/element-anchoring/automatic-element-target-mapping.md) — Implements automatic mapping of child elements to controller targets via data attributes.
- [DOM-Driven State Management](https://awesome-repositories.com/f/web-development/frontend-development-tools/state-data-management/component-lifecycle-utilities/component-state-management/dom-driven-state-management.md) — Manages component lifecycles and state based on the presence of elements in the DOM.

### Programming Languages & Runtimes

- [Class-Based Architecture](https://awesome-repositories.com/f/programming-languages-runtimes/class-based-architecture.md) — Organizes interactive behavior into reusable JavaScript classes that maintain internal state.