live-component
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.
LiveComponent builds reactive server-rendered UI that re-renders via AJAX on user interaction, requiring zero JavaScript.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-06-14
LiveComponent builds reactive server-rendered UI that re-renders via AJAX on user interaction, requiring zero JavaScript. 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.
Use it when
- Yes.
- LiveComponent enables real-time form validation by re-rendering your component whenever a form field changes.
Verify before relying
Read SKILL.md below before installing (4 files). Open directory: indexed for reading, not audited.
Install
smnandre/symfony-ux-skills/live-component
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do you build symfony reactive components without javascript?
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.
Can LiveComponent implement live search that filters as you type?
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.
How does real-time form validation work in LiveComponent?
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—all without page reloads or custom JavaScript.
What is ajax component re-render on user input in LiveComponent?
LiveComponent automatically re-renders components via AJAX when users interact with them. Each interaction—typing, selecting, clicking—triggers 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.
How do you create dependent select dropdowns with LiveComponent?
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.
Does LiveComponent support auto-save and component state persistence?
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.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
LiveComponent
TwigComponents that
(truncated - see the full file via the links below)
File tree — 4 files
skills/live-component/SKILL.md
skills/live-component/references/api.md
skills/live-component/references/gotchas.md
skills/live-component/references/patterns.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build reactive UI components that re-render on user input without writing JavaScript”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Symfony UX is a decision guide for selecting the right tool from Symfony's reactive frontend stack. It helps you navigate between Stimulus for DOM behavior, Turbo for page updates, TwigComponent for static UI, LiveComponent for server-driven interactivity, UX Icons for SVG rendering, and UX Map for interactive maps. Use it when you're unsure which package solves your problem or want to combine multiple tools.
UX Map brings interactive mapping to Symfony applications using either Leaflet or Google Maps as your renderer. Define maps in PHP, render them in Twig, and layer on Stimulus controllers for event handling. Supports markers, polygons, polylines, circles, and popup info windows.
Stimulus is a lightweight JavaScript framework that wires controllers to HTML via data attributes, letting you handle clicks, inputs, and DOM changes without rendering markup. Attach behavior to server-rendered elements using `data-controller`, `data-action`, and `data-target` attributes, then compose controllers for toggles, modals, dropdowns, and more. Clean up in `disconnect()` when Turbo navigates between pages.
TwigComponent enables you to compose reusable UI building blocks by pairing PHP classes with Twig templates, rendered server-side with zero JavaScript overhead. Define props, blocks, and computed properties to create everything from simple buttons to complex layout sections. Use class components for logic-heavy elements or anonymous Twig-only components for presentational markup.
This skill scaffolds a Stimulus controller for Sylius plugins, creating the JS file and syncing declarations across package.json and controllers.json. It handles both admin and shop contexts with configurable lazy or eager loading modes.
Stimulus Coder guides you through writing interactive controllers that attach behavior to HTML elements using the Stimulus framework. Learn controller design patterns, state management via data attributes, action handling, and communication strategies between controllers.
More skills turbo (MIT) · livewire-development (MIT)