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
Decision gist · record as of 2026-06-14
Stimulus adds client-side interactivity to server-rendered HTML using data attributes, no build step required. 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.
Use it when
- Stimulus uses three main data attributes to wire behavior: `data-controller` names the controller class.
- Stimulus excels at building reusable UI components like dropdowns and modals.
Verify before relying
Read SKILL.md below before installing (4 files). Open directory: indexed for reading, not audited.
Install
smnandre/symfony-ux-skills/stimulus
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 4 files
skills/stimulus/SKILL.md
skills/stimulus/references/api.md
skills/stimulus/references/gotchas.md
skills/stimulus/references/patterns.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Add client-side interactivity to server-rendered HTML without full SPA”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill scaffolds a Stimulus controller for Sylius plugins, creating the JS file and syncing declarations across package.json and controllers.json. It handles both admin and shop contexts with configurable lazy or eager loading modes.
Stimulus Coder guides you through writing interactive controllers that attach behavior to HTML elements using the Stimulus framework. Learn controller design patterns, state management via data attributes, action handling, and communication strategies between controllers.
Symfony UX is a decision guide for selecting the right tool from Symfony's reactive frontend stack. It helps you navigate between Stimulus for DOM behavior, Turbo for page updates, TwigComponent for static UI, LiveComponent for server-driven interactivity, UX Icons for SVG rendering, and UX Map for interactive maps. Use it when you're unsure which package solves your problem or want to combine multiple tools.
LiveComponent lets you create interactive UI components in PHP and Twig that automatically re-render when users interact with them, all without writing JavaScript. Each user action triggers a server round-trip that updates the component and morphs the DOM, making it ideal for live search, real-time validation, dynamic filtering, and dependent form fields. Use it when your component's output depends on user input and requires server-side logic.
UX Map brings interactive mapping to Symfony applications using either Leaflet or Google Maps as your renderer. Define maps in PHP, render them in Twig, and layer on Stimulus controllers for event handling. Supports markers, polygons, polylines, circles, and popup info windows.
TwigComponent enables you to compose reusable UI building blocks by pairing PHP classes with Twig templates, rendered server-side with zero JavaScript overhead. Define props, blocks, and computed properties to create everything from simple buttons to complex layout sections. Use class components for logic-heavy elements or anonymous Twig-only components for presentational markup.
More skills turbo (MIT)