← ClaudeAtlas

live-componentlisted

Symfony UX LiveComponent for dynamic server-rendered UI. Use when building interactive components that re-render via AJAX, real-time forms, data binding, live validation, or reactive UI without writing JavaScript. Triggers - live component, AsLiveComponent, LiveProp, LiveAction, data-model, real-time form, dynamic UI, AJAX component, reactive PHP, two-way binding, server re-render, live search, live filter, live validation, ComponentWithFormTrait, emit, LiveListener, polling, defer, lazy component, data-loading, writable prop, URL binding, component communication. Also trigger when the user wants a component that updates itself based on user input without writing JavaScript, or wants Vue/React-like reactivity in PHP.
BKR-57/symfony-ux-skills · ★ 0 · Web & Frontend · score 75
Install: claude install-skill BKR-57/symfony-ux-skills
# LiveComponent TwigComponents that re-render dynamically via AJAX. Build reactive UIs in PHP + Twig with zero JavaScript. Every user interaction triggers a server round-trip that re-renders the component and morphs the DOM. ## When to Use LiveComponent Use LiveComponent when a component's output depends on user interaction -- search results that update as you type, forms with real-time validation, filters that refine a list, anything where the UI needs to change based on user input and that change requires server-side data or logic. If the component never re-renders after initial load, use TwigComponent instead (less overhead, no AJAX). If the interaction is purely client-side (toggle, animation), use Stimulus instead. ## Installation ```bash composer require symfony/ux-live-component ``` ## Quick Reference ``` #[AsLiveComponent] Make component live (re-renderable via AJAX) #[LiveProp] State that persists across re-renders #[LiveProp(writable: true)] State that the frontend can modify #[LiveAction] Server method callable from frontend data-model="prop" Two-way bind input to LiveProp data-action="live#action" Call LiveAction on event data-loading="..." Show/hide/style elements during AJAX {{ attributes }} REQUIRED on root element (wires the Stimulus controller) ``` ## Basic Example ```php // src/Twig/Components/Counter.php namespace App\Twig\Components; use Symfony\UX\LiveComponent\Attri