stimulus

Attach Stimulus controllers to server-rendered HTML via data attributes.

166|12|Updated Mar 2, 2026

Search Tags:#frontend #javascript #controller #data-attributes #web-ui #stimulus #symfony-ux

Ready to run

npx skills add https://github.com/smnandre/symfony-ux-skills --skill stimulus-smnandre

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: stimulus
Source: https://github.com/smnandre/symfony-ux-skills/tree/main/skills/stimulus
Command: npx skills add https://github.com/smnandre/symfony-ux-skills --skill stimulus-smnandre

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Stimulus provides a modest JavaScript framework that attaches behaviors to HTML via data attributes, enabling interactivity for server-rendered markup without a heavy client-side build step.

Core Features & Use Cases

Lifecycle: connect and disconnect callbacks, targets, values, and actions
Wiring: data-controller, data--target, data--value, and data-*-action attributes to attach behavior
Patterns: simple UI interactions such as dropdowns, forms, modals, and dynamic updates without re-rendering
Use Case: add a toggle to a static HTML page by wiring a stimulus controller to a button

Quick Start

Attach a Stimulus controller to an element using data-controller and define targets, values, and actions to enable interactive behavior.

Frequently Asked Questions about stimulus

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add interactivity to server-rendered HTML without a heavy JavaScript framework?▼

Stimulus attaches behaviors to server-rendered HTML via data attributes, enabling interactivity without a heavy client-side build step. You wire elements to controllers using data-controller, data-*-target, and data-*-action attributes to handle UI interactions.

How do I wire a Stimulus controller to a button for a simple UI toggle?▼

To create a UI toggle, attach a Stimulus controller to the HTML element using data-controller. You then define targets, values, and actions via data attributes to connect the button click to the interactive behavior.

Can I use Stimulus with Symfony UX to build modular UI components?▼

Yes, Stimulus is designed for building modular UI components in Symfony UX. It wires server-rendered elements to JavaScript controllers using data attributes for actions, targets, values, and outlets.

How does cross-controller communication work with data attributes in Stimulus?▼

Cross-controller communication in Stimulus uses outlets, which wire elements to other controllers via data attributes. This allows controllers to interact while also managing lifecycle hooks like connect and disconnect callbacks.

What lifecycle callbacks are available when attaching Stimulus controllers to HTML elements?▼

Stimulus controllers satisfy connect and disconnect lifecycle hooks when attached to HTML elements. These callbacks fire when elements enter or leave the DOM, allowing you to manage state for UI interactions like dropdowns and modals.

Does Stimulus require a complex client-side build step to manage dynamic form updates?▼

No, Stimulus enables dynamic form updates without re-rendering or a heavy client-side build step. It applies simple UI interaction patterns by wiring data attributes directly to server-rendered markup.