Symfony UX Central Piece

Stimulus Bundle

Connects Stimulus, UX packages, Asset Mapper, Webpack Encore... Making it easy to add JavaScript interactivity to your Symfony apps!

Simple by Design

Seamless Integration

Optimized for Performance

Lazy Loading

Web Standards

Stimulus Twig Helpers

`stimulus_controller`

This function attaches a Stimulus controller to an HTML element and allows passing values (via data-attributes) that can be accessed within the controller.

These values are useful for providing dynamic data or configuration to your controller’s logic.

<div {{ stimulus_controller('userProfile', {userId: 42, theme: 'dark'}) }}>
    Welcome to your profile!
</div>

{# would render as #}

<div data-controller="userProfile" data-user-profile-user-id-value="42"
     data-user-profile-theme-value="dark">
    Welcome to your profile!
</div>

`stimulus_target`

This function defines one or more targets within a Stimulus controller. These targets allow you to interact with specific DOM elements directly from your controller’s logic.

<div {{ stimulus_controller('userProfile') }}>
    <span {{ stimulus_target('userProfile', 'name') }}>John Doe</span>
    <span {{ stimulus_target('userProfile', 'avatar') }}>
        <img src="avatar.jpg" alt="John's Avatar">
    </span>
</div>

{# would render as #}

<div data-controller="userProfile">
    <span data-user-profile-target="name">John Doe</span>
    <span data-user-profile-target="avatar">
        <img src="avatar.jpg" alt="John's Avatar">
    </span>
</div>

`stimulus_action`

This function attaches an event listener to an HTML element, defining actions that trigger specific methods in the controller.

This simplifies event handling by mapping DOM events (like click, input, etc.) directly to controller methods, improving the clarity and maintainability of your code.

<button {{ stimulus_action('userProfile', 'save', 'click') }}>
    Save Profile
</button>

{# would render as #}

<button data-action="click->userProfile#save">
    Save Profile
</button>

Install It

$ composer require symfony/stimulus-bundle