live-component

Reactive server-rendered UI components in Symfony are built using the UX LiveComponent library with PHP and Twig. Components re-render via AJAX as users interact, requiring an AsLiveComponent class annotation and a root template element rendered with attributes to enable reactivity.

Data-binding in Twig templates uses the data-model attribute to link HTML inputs directly to LiveProp properties. When users interact with elements like a live search field, the component re-renders via AJAX, automatically updating the server-rendered UI without client-side JavaScript.

You do not need client-side JavaScript to update Symfony components dynamically. The LiveComponent system handles AJAX requests automatically when users interact with the UI, re-rendering the server-rendered Twig templates on the server and morphing the DOM upon response.

Setting up a Symfony UX LiveComponent requires defining a PHP class annotated with AsLiveComponent, declaring LiveProp and LiveAction properties, and rendering the root element with attributes. This strict structure ensures the server-rendered component functions and re-renders correctly.

You can create modal dialogs and live lists that morph as data changes using server-rendered PHP. By applying the LiveComponent architecture with LiveAction methods and data-model bindings, dynamic UI elements re-render seamlessly via AJAX as underlying data updates.

LiveComponent updates fail when the root template element lacks the required attributes variable or the PHP class misses the AsLiveComponent annotation. Proper data-model bindings and LiveProp declarations are strictly enforced to ensure the AJAX re-rendering mechanism functions correctly.