stimulus
Stimulus is a lightweight JavaScript framework that wires controllers to HTML via data attributes, letting you handle clicks, inputs, and DOM changes without rendering markup. Attach behavior to server-rendered elements using `data-controller`, `data-action`, and `data-target` attributes, then compose controllers for toggles, modals, dropdowns, and more. Clean up in `disconnect()` when Turbo navigates between pages.
Stimulus adds client-side interactivity to server-rendered HTML using data attributes, no build step required.
AI-generated summary based on this skill's SKILL.md
Install
smnandre/symfony-ux-skills/stimulus
git clone https://github.com/smnandre/symfony-ux-skills
cp -r symfony-ux-skills/skills/stimulus ~/.claude/skills/stimulusFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is Stimulus and how do I add click handlers in it?
Stimulus is a lightweight JavaScript framework that wires controllers to HTML via data attributes. To add click handlers, create a controller class with an action method, then use `data-controller` to attach it to an element and `data-action` to bind the click event. For example: `<button data-controller="toggle" data-action="click->toggle#toggle">Click me</button>` connects to a `toggle()` method in your controller.
How do stimulus controller data attributes work?
Stimulus uses three main data attributes to wire behavior: `data-controller` names the controller class, `data-action` binds DOM events to controller methods (format: `event->controller#method`), and `data-target` marks elements for reference in your controller code. You access targets via `this.targetName` in your controller, making it easy to manipulate specific elements without querying the DOM.
Can I build a dropdown or modal with Stimulus?
Stimulus excels at building reusable UI components like dropdowns and modals. Create a controller with methods to toggle visibility, handle clicks outside the component, and manage CSS classes. Use `data-target` to reference the dropdown menu or modal backdrop, then use `data-action` to wire button clicks to your toggle methods. This approach keeps behavior tied to markup without a full SPA.
How do I communicate between multiple Stimulus controllers?
Stimulus provides outlets to coordinate behavior across controllers. Define an outlet in one controller using `static outlets = ['other']`, then reference it via `this.otherOutlets` to call methods or access targets on other controllers. You can also use global event listeners with `dispatch()` to broadcast events that multiple controllers listen for via `data-action`.
How do I wrap a third-party JavaScript library in Stimulus?
Stimulus controllers can initialize and manage third-party libraries in the `connect()` lifecycle method. Store the library instance as a property, configure it with your targets and options, then clean up in `disconnect()` when Turbo navigates away. This pattern lets you integrate heavy dependencies without rendering markup, keeping your server-rendered HTML lightweight.
What cleanup should Stimulus controllers do when disconnecting?
Stimulus calls `disconnect()` when Turbo navigates between pages or an element is removed from the DOM. Use this lifecycle method to remove event listeners, cancel timers, destroy third-party library instances, and free memory. Proper cleanup prevents memory leaks and ensures your controllers don't interfere with subsequent page loads.
SKILL.md
rendered from the published skill — quoted content, verbatim
Stimulus
Modest JavaScript framework that
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 4 files
skills/stimulus/SKILL.md
skills/stimulus/references/api.md
skills/stimulus/references/gotchas.md
skills/stimulus/references/patterns.md