NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →
Packagist · #960 most downloaded on Packagist
Live components for Symfony
Last release 18 days ago
19 Sep 2026
Ships fairly regularly
a new release about every 6 weeks
Some releases are documented
notes for 34 of the last 60 stable releases
Nothing withdrawn
no release was ever pulled
5 years old
67 releases · first in 2021
One column per quarter.
Nothing published for this version
feature #3814 Add support for Twig 4.x ( @Kocal )
Changelog (v3.4.0...v3.5.0)
html_attr() (@Kocal)target to es2022 (@Kocal)bug #3730 Fix broken assets/tsconfig.json reference breaking webpack 5.109+ builds ( @zalesak )
Changelog (v3.3.0...v3.4.0)
bug #3676 Avoid 500 errors on malformed hydration payloads ( @Amoifr )
Changelog (v3.2.0...v3.3.0)
Changelog ( v3.1.0...v3.2.0 ) no significant changes
Changelog (v3.1.0...v3.2.0)
security # cve-2026-49208 Parse format-less date LiveProps strictly with RFC 3339 ( @Kocal )
Changelog (v3.0.0...v3.1.0)
_batch request (@Kocal)LiveComponentSubscriber safe-by-default (@Kocal)aria-busy attribute during component re-render (@Amoifr)feature #3051 Remove deprecations ( @smnandre )
Changelog (v2.34.0...v3.0.0)
security # cve-2026-49208 Parse format-less date LiveProps strictly with RFC 3339 ( @Kocal )
Changelog (v2.35.0...v2.36.0)
_batch request (@Kocal)Changelog ( v2.34.0...v2.35.0 )
Changelog (v2.34.0...v2.35.0)
Changelog ( v2.33.0...v2.34.0 )
Changelog (v2.33.0...v2.34.0)
feature #3362 Migrate from tsup (deprecated) to tsdown ( @Kocal )
Changelog (v2.32.0...v2.33.0)
debug:live-component command (Mickaël BULIARD)TestLiveComponent::call() (@StevenRenaux)fetchCredentials (@Kocal)zenstruck/foundry and Symfony 5.4 (@GromNaN)repository issue (@Kocal)Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
- Add Symfony 8 support
Nothing published for this version
Nothing published for this version
Add new modifiers for input validations, useful to prevent unnecessary HTTP requests:
Add new modifiers for input validations, useful to prevent unnecessary HTTP requests:
min_length and max_length: validate length from textual input elementsmin_value and max_value: validate value from numeral input elementsAdd new mapPath options (default false) to UrlMapping of a LiveProp
to allow the prop to be mapped to the path instead of the query in the url.
<!-- Do not trigger model update until 3 characters are typed -->
<input data-model="min_length(3)|username" type="text" value="" />
<!-- Only trigger updates when value number is between 10 and 100 -->
<input data-model="min_value(10)|max_value(100)|quantity" type="number" value="20" />
Add events assertions in InteractsWithLiveComponents:
InteractsWithLiveComponents:$testComponent = $this->createLiveComponent(name: 'MyComponent');
$renderedComponent = $testComponent->render();
// Assert that the component did emit an event named 'event'
$this->assertComponentEmitEvent($render, 'event')
// optionally, you can assert that the event was emitted with specific data...
->withData(['arg1' => 'foo', 'arg2' => 'bar'])
// ... or only with a subset of data
->withDataSubset(['arg1' => 'foo']);
// Assert that the component did not emit an event named 'another-event'
$this->assertComponentNotEmitEvent($render, 'another-event');
Nothing published for this version
Add compatibility layer to fix deprecation with Symfony\Component\PropertyInfo\PropertyInfoExtractor::getTypes(). If you use PHP 8.2 or higher, we rec…
LiveProp: Pass the property name as second parameter of the modifier callableSymfony\Component\PropertyInfo\PropertyInfoExtractor::getTypes().
If you use PHP 8.2 or higher, we recommend you to update dependency symfony/property-info to at least 7.1.0Nothing published for this version
Nothing published for this version
Add support for Symfony UID hydration/dehydration
ComponentWithFormTrait now correctly checks for a TranslatableInterface placeholder for <select> elementsLiveComponentHydrator::hydrateValue() to hydrate null valuesNothing published for this version
Allow configuring the secret used to compute fingerprints and checksums.
__component property to be serialized when called JSON.stringify()Nothing published for this version
Remove CSRF tokens - rely on same-origin/CORS instead
Nothing published for this version
Nothing published for this version
Nothing published for this version
Add submitForm() to TestLiveComponent.
submitForm() to TestLiveComponent.live_action Twig functionNothing published for this version
Add parameter to TestLiveComponent::call() to add files to the request
TestLiveComponent::call() to add files to the requestAdd modifier option in LiveProp so options can be modified at runtime.
modifier option in LiveProp so options can be modified at runtime.loading attribute to defer the rendering on the component after the
page is rendered, either when the page loads (loading="defer") or when
the component becomes visible in the viewport (loading="lazy").defer attribute.UrlMapping configuration object for URL bindings in LiveComponents…and data-live-action-param. This is a breaking change if you were using the data-action-name attribute directly in your templates. #1418
LiveComponents is now stable and no longer experimental 🥳
[BC BREAK] The data-action-name attribute behavior was removed in favor of
using Stimulus "action parameters" and data-live-action-param. This is a
breaking change if you were using the data-action-name attribute directly
in your templates. #1418
To upgrade your application, follow these changes:
<button
data-action="live#action"
- data-action-name="debounce(300)|save"
+ data-live-action-param="debounce(300)|save"
>Save</button>
To pass arguments to an action, also use the Stimulus "action parameters" syntax:
<button
data-action="live#action"
- data-action-name="addItem(id={{ item.id }}, itemName=CustomItem)"
+ data-live-action-param="addItem"
+ data-live-id-param="{{ item.id }}"
+ data-live-item-name-param="CustomItem"
>Add Item</button>
Additionally, the prevent modifier (e.g. prevent|save) was removed. Replace
this with the standard Stimulus :prevent action option:
<button
- data-action="live#action
+ data-action="live#action:prevent"
- data-action-name="prevent|save"
+ data-live-action-param="save"
>Save</button>
[BC BREAK] The data-event attribute was removed in favor of using Stimulus
"action parameters": rename data-event to data-live-event-param. Additionally,
if you were passing arguments to the event name, use action parameter attributes
for those as well - e.g. data-live-foo-param="bar". #1418
Reverted setting ignoreActiveValue: true in Idiomorph #1548
New placeholder macro to generate defer/lazy skeleton #1532
improve TestLiveComponent::actingAs() #1461
Drop Twig 2 support #1436
Add better error message when hydrating dates #1431
Store TemplateMap in build_dir #1525
[BC BREAK] The data-live-id attribute was changed to id #1484
data-live-id attribute was changed to id #1484Nothing published for this version
Fixed a regression in the testing tools related to the default HTTP method change
[BC BREAK] DOM morphing changed from morphdom to idiomorph. As this is a different morphing library, there may be some edge cases where the morphing b
morphdom to idiomorph. As this is
a different morphing library, there may be some edge cases where the
morphing behavior is different.LivePropLiveListener attributes on a single method#[AsLiveComponent(method: 'get')]urlReferenceType parameter to AsLiveComponent, which allows to
generate different type URL (e.g. absolute) for the component Ajax callssymfony/serializer dependency is now optionaldata-skip-morph attribute to allow skipping morphing of an element
(the element's attributes will be morphed, but its inner HTML will be overwritten
instead of morphed)package.json file so that @symfony/ux-live-component
will appear in the user's importmap.php file if using AssetMapper. This
will allow using the JavaScript from the package without extra setup.{% embed %} with {% block %} in <twig:> componentsdata-loading not working when on root element of a componentclass attributes contained a space at start or endNothing published for this version
Revert "Change JavaScript package to type: module"
type: module"Nothing published for this version
Add deferred/lazy rendering of Live Components.
type: module.Add support for (de)hydrating DTO classes in LiveProp.
LiveProp.emit() method of TestLiveComponent to properly test events.actionAs() to TestLiveComponent.onUpdated() hook for LiveProp.Nothing published for this version
Nothing published for this version
Add helper for testing live components.
data-turbo="false" when handling redirects.Nothing published for this version
Nothing published for this version
Add support for symfony/asset-mapper
Increased the priority of LiveComponentSubscriber ControllerEvent from 0 to 10 to fix incompatibility with SensioFrameworkExtraBundle.
LiveComponentSubscriber ControllerEvent from
0 to 10 to fix incompatibility with SensioFrameworkExtraBundle.[BC BREAK]: The exposed option was changed to writable in LiveProp:
exposed option was changed to writable in LiveProp:-#[LiveProp(exposed: ['email', 'plainPassword'])]
+#[LiveProp(writable: ['email', 'plainPassword'])]
public User $user;
[BC BREAK]: LiveProp values are no longer automatically (de)hydrated
through Symfony's serializer. Use LiveProp(useSerializerForHydration: true)
to activate this. Also, a serializationContext option was added to
LiveProp.
[BC BREAK]: Child components are no longer automatically re-rendered when
a parent component re-renders and the value of one of the props passed to
the child has changed. Pass acceptUpdatesFromParent: true to any LiveProp
on the child component to re-enable this behavior.
Non-persisted entity objects can now be used with LiveProp: it will be
serialized using the serializer.
Better support for using arrays with LiveProp.
Smart rendering system! If you have JavaScript that makes changes to the DOM inside a live component, those changes will now be kept when the component is re-rendered. This has limitations - see the documentation.
You can now emit() events to communicate between components.
You can now dispatch DOM/browser events from components.
Boolean checkboxes are now supported. Of a checkbox does not have a
value attribute, then the associated LiveProp will be set to a boolean
when the input is checked/unchecked.
A format option was added to LiveProp to control how DateTime
properties are (de)hydrated.
Added support for setting writable to a property that is an object
(previously, only scalar values were supported). The object is passed
through the serializer.
Invalid data sent by the user is now handled in a robust way. Previously,
if the user sent invalid data (e.g. a string for a LiveProp that has
an int type), the component update would break. Now, if the new data
cannot be hydrated onto the object during a re-render, the last valid
value is used.
When using ValidatableComponentTrait, a new _errors variable is sent
to the template, which is easier to use!
Several bug fixes to parent - child components - see #700.
Fixed handling of boolean attributes to a component - see #710.
Fixed performance calculating component fingerprint for large components.
Nothing published for this version
[BC BREAK]: The "key" used to load the controller in your assets/controllers.json file changed from typed to live. Update your assets/controllers.json
[BC BREAK]: The "key" used to load the controller in your assets/controllers.json
file changed from typed to live. Update your assets/controllers.json
file to change this key.
Add a strategy for adding a Stimulus controller to a Twig component - #589.
Added a new getCompontent() function in JavaScript as the best way to find
a Component object for a given element.
Fixed various bugs related to child component handling - #596
Added a new route parameter to AsLiveComponent, which allows to choose
another route for Ajax calls.
Add assets/src to .gitattributes to exclude source TypeScript files from
installing.
TypeScript types are now included.
Added new response:error JavaScript component hook for custom handling Ajax errors - #587.
Nothing published for this version
[BC BREAK]: The path to live_component.xml changed _and_ the import now MUST have a prefix: you should update your route import accordingly (the name
live_component.xml changed and the import now
MUST have a prefix: you should update your route import accordingly (the
name of the route also changed to ux_live_component):# config/routes/ux_live_component.yaml
live_component:
- resource: '@LiveComponentBundle/Resources/config/routing/live_component.xml'
+ resource: '@LiveComponentBundle/config/routes.php'
+ prefix: /_components
Content-Type header when returning the empty response redirect.[BEHAVIOR CHANGE] Previously, Ajax calls could happen in parallel (if you changed a model then triggered an action before the model update Ajax call f
[BEHAVIOR CHANGE] Previously, Ajax calls could happen in parallel (if you changed a model then triggered an action before the model update Ajax call finished, the action Ajax call would being in parallel). Now, if an Ajax call is currently happening, any future requests will wait until it finishes. Then, all queued changes (potentially multiple model updates or actions) will be sent all at once on the next request.
[BEHAVIOR CHANGE] Fields with data-model will now have their value set
automatically when the component initially loads and re-renders. For example,
previously you needed to manually set the value in your component template:
<!-- BEFORE -->
<input data-model="firstName" value="{{ firstName }}">
This is no longer necessary: Live Components will now set the value on load, which allows you to simply have the following in your template:
<!-- AFTER -->
<input data-model="firstName">
[BEHAVIOR CHANGE] The way that child components re-render when a parent re-renders
has changed, but shouldn't be drastically different. Child components will now
avoid re-rendering if no "input" to the component changed and will maintain
any writable LiveProp values after the re-render. Also, the re-render happens
in a separate Ajax call after the parent has finished re-rendering.
[BEHAVIOR CHANGE] If a model is updated, but the new value is equal to the old one, a re-render will now be avoided.
[BEHAVIOR CHANGE] Priority of DoctrineObjectNormalizer changed from 100 to -100
so that any custom normalizers are used before trying DoctrineObjectNormalizer.
[BC BREAK] The live:update-model and live:render events are not longer
dispatched. You can now use the "hook" system directly on the Component object/
[BC BREAK] The LiveComponentHydrator::dehydrate() method now returns a
DehydratedComponent object.
Added a new JavaScript Component object, which is attached to the __component
property of all root component elements.
the ability to add data-loading behavior, which is only activated
when a specific action is triggered - e.g. <span data-loading="action(save)|show">Loading</span>.
Added the ability to add data-loading behavior, which is only activated
when a specific model has been updated - e.g. <span data-loading="model(firstName)|show">Loading</span>.
Unexpected Ajax errors are now displayed in a modal to ease debugging! #467.
Fixed bug where sometimes a live component was broken after hitting "Back: in your browser - #436.
Your coding agent can read these notes before it upgrades. Set up the MCP server →