{"enrichment":{"faq":[{"a":"LiveComponent lets you build reactive UI components in PHP and Twig that re-render automatically on user interaction without writing JavaScript. When a user types, clicks, or submits a form, LiveComponent sends the input to your server, runs your PHP logic, and morphs only the changed parts of the DOM back into the page. This approach works well for live search, filtering, validation, and dependent fields where your component's output depends on server-side logic.","q":"How do you build symfony reactive components without javascript?"},{"a":"Yes. LiveComponent is designed for live search and filtering. Bind an input field to a component property using data attributes, and LiveComponent automatically sends each keystroke to the server. Your PHP method filters the results and returns updated Twig markup. LiveComponent then morphs the DOM to show new results without a full page reload. You can add debouncing to reduce server requests during rapid typing.","q":"Can LiveComponent implement live search that filters as you type?"},{"a":"LiveComponent enables real-time form validation by re-rendering your component whenever a form field changes. Bind each field to a component property, add validation logic in your PHP class, and return validation errors in your Twig template. As users type or change fields, LiveComponent sends updates to the server, validates the input, and displays errors inline\u2014all without page reloads or custom JavaScript.","q":"How does real-time form validation work in LiveComponent?"},{"a":"LiveComponent automatically re-renders components via AJAX when users interact with them. Each interaction\u2014typing, selecting, clicking\u2014triggers a server round-trip. Your component's PHP methods receive the updated data, execute your business logic, and return new Twig markup. LiveComponent morphs the DOM to reflect changes, making it feel reactive while keeping all logic server-side. This pattern eliminates boilerplate for interactive features.","q":"What is ajax component re-render on user input in LiveComponent?"},{"a":"LiveComponent handles dependent dropdowns by binding each select to a component property. When the first dropdown changes, LiveComponent re-renders the component, your PHP method updates the second dropdown's options based on the first selection, and the new markup is morphed into the DOM. This works for any number of dependent fields and keeps all logic in PHP, not JavaScript.","q":"How do you create dependent select dropdowns with LiveComponent?"},{"a":"Yes. LiveComponent can auto-save form data server-side by triggering re-renders on input changes or at intervals. Your PHP component method receives updated data, persists it to your database, and returns confirmation or updated UI. You can also use deferred rendering to lazy-load components on scroll or visibility, and emit events between components to coordinate updates across your page.","q":"Does LiveComponent support auto-save and component state persistence?"}],"shadow_tags":["server-driven-ui","zero-javascript-interactivity","morphing-dom-updates","stateful-components","request-debouncing","real-time-feedback","component-events","deferred-loading","form-binding","ajax-rerendering"],"summary_rewrite":"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."},"files":[{"bytes":13279,"path":"skills/live-component/SKILL.md","sha256":"83ae847ffc037e632b76bca01dcdaca45ecba023b0499f7db59470e0cb2d5a92","url":"https://skillfed.io/files/smnandre/symfony-ux-skills/live-component/760e8bce/SKILL.md"}],"id":"smnandre/symfony-ux-skills/live-component","links":{"html":"https://skillfed.io/smnandre/symfony-ux-skills/live-component","md":"https://skillfed.io/smnandre/symfony-ux-skills/live-component.md","repo":"https://github.com/smnandre/symfony-ux-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":12,"language":null,"last_updated":"2026-06-14","license":"MIT","name":"live-component","publisher":"smnandre","stars":164},"relations":{"similar":[{"id":"smnandre/symfony-ux-skills/symfony-ux"},{"id":"smnandre/symfony-ux-skills/ux-map"},{"id":"smnandre/symfony-ux-skills/twig-component"},{"id":"smnandre/symfony-ux-skills/stimulus"},{"id":"smnandre/symfony-ux-skills/turbo"},{"id":"Guiziweb/guiziweb-plugins/add-images"},{"id":"smnandre/symfony-ux-skills/ux-icons"},{"id":"Guiziweb/guiziweb-plugins/plugin-add-stimulus-controller"},{"id":"Guiziweb/guiziweb-plugins/add-grid-export"},{"id":"Guiziweb/guiziweb-plugins/add-autocomplete"}]},"slug":{"owner":"smnandre","repo":"symfony-ux-skills","skill":"live-component"},"version":"760e8bce"}