stimulus

Solid

Stimulus JS framework for Symfony UX -- client-side behavior via HTML data attributes, zero server round-trips. Use when creating controllers for DOM manipulation, handling click/input/submit events, managing targets and values, wiring outlets between controllers, wrapping third-party JS libraries, or building toggles, dropdowns, modals, tabs, clipboard interactions. Code triggers: data-controller, data-action, data-target, data-*-value, data-*-class, data-*-outlet, stimulusFetch lazy, connect(), disconnect(), static targets, static values. Also trigger when the user asks "how do I add a click handler", "how to toggle a class", "how to build a dropdown/modal/tabs", "how to wrap a JS library in Symfony", "add keyboard shortcuts", "lazy-load a controller", "listen to global events", "communicate between controllers". Do NOT trigger for partial page updates without JS (use turbo), server-rendered reactivity (use live-component), or reusable Twig templates (use twig-component).

Web & Frontend 158 stars 11 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 90/100

Stars 20%

Recency 20%

100

Frontmatter 20%

Documentation 15%

100

Issue Health 10%

License 10%

100

Description 5%

100

Skill Content

# Stimulus Modest JavaScript framework that connects JS objects to HTML via data attributes. Stimulus does not render HTML -- it augments server-rendered HTML with behavior. The mental model: HTML is the source of truth, JavaScript controllers attach to elements, and data attributes are the wiring. No build step required with AssetMapper. ## Quick Reference ``` data-controller="name" attach controller to element data-name-target="item" mark element as a target data-action="event->name#method" bind event to controller method data-name-key-value="..." pass typed data to controller data-name-key-class="..." configure CSS class names data-name-other-outlet=".selector" reference another controller instance ``` ## Controller Skeleton ```javascript // assets/controllers/example_controller.js import { Controller } from '@hotwired/stimulus'; export default class extends Controller { static targets = ['input', 'output']; static values = { url: String, delay: { type: Number, default: 300 } }; static classes = ['loading']; static outlets = ['other']; connect() { // Called when controller connects to DOM } disconnect() { // Called when controller disconnects -- clean up here } submit(event) { // Action method } } ``` File naming convention: `hello_controller.js` maps to `data-controller="hello"`. Subdirectories use `--` as separator: `components/modal_controller.js` ...