# Symfony Live Components und UX 3.0: Reaktive Anwendungen ohne JavaScript im Jahr 2026

> Dieses Tutorial zeigt, wie sich mit Symfony Live Components und UX 3.0 reaktive Oberflächen ganz ohne JavaScript erstellen lassen. Mit praktischen Codebeispielen für Suche, Warenkorb und Formulare.

- Published: 2026-05-10
- Updated: 2026-05-10
- Author: SharpSkill
- Tags: symfony, live components, symfony ux, php, twig, reactive ui
- Reading time: 8 min

---

**Symfony Live Components** haben die Art und Weise, wie PHP-Entwickler reaktive Oberflächen erstellen, grundlegend verändert. Mit dem Release von Symfony UX 3.0 im Jahr 2026 hat sich diese Bibliothek als die zentrale Lösung für dynamische Webanwendungen etabliert, die ausschließlich auf PHP und Twig basieren – ganz ohne komplexen JavaScript-Code.

Dieses Tutorial stellt die grundlegenden Konzepte der Live Components vor, zeigt praxisnahe Anwendungsfälle und beleuchtet die wichtigsten Neuerungen von UX 3.0, die die Entwicklung reaktiver Interfaces im Symfony-Ökosystem nachhaltig verändert haben.

> **Wichtiger Hinweis**
>
> Live Components funktionieren, indem sie bei jeder Änderung einer mit `#[LiveProp(writable: true)]` markierten Eigenschaft automatisch AJAX-Anfragen an den Server senden. Symfony rendert nur die Teile des Templates neu, die sich tatsächlich geändert haben – das erzeugt eine flüssige Benutzererfahrung ohne vollständiges Neuladen der Seite.

## Installation und Konfiguration von Symfony UX 3.0

Der erste Schritt bei der Arbeit mit Live Components ist die Installation des Pakets `symfony/ux-live-component`. Version 3.0 bietet vollständige Kompatibilität mit PHP 8.4+ und Symfony 7.4+ sowie eine native Integration mit dem AssetMapper – dadurch entfällt die Notwendigkeit von Webpack oder Vite für das Frontend-Dependency-Management.

```bash
# terminal
composer require symfony/ux-live-component

# With AssetMapper (recommended for Symfony 7.4+)
php bin/console importmap:require @symfony/ux-live-component

# Verify installation
php bin/console debug:twig --filter=component
```

Nach der Installation sollte der Befehl `debug:twig` alle im Projekt verfügbaren Twig-Komponenten auflisten. Der AssetMapper vereinfacht die Konfiguration erheblich, indem er JavaScript-Compiler überflüssig macht und den Entwicklungsprozess im Einklang mit der Symfony-Philosophie beschleunigt.

## Reaktive Suchkomponente mit LiveProp erstellen

Einer der häufigsten Anwendungsfälle für Live Components ist die Implementierung von Suchsystemen, die Ergebnisse in Echtzeit aktualisieren, während der Benutzer tippt. Das folgende Beispiel zeigt eine Produktsuche mit dynamischen Filtern und URL-Synchronisierung.

```php
<?php
// src/Twig/Components/ProductSearch.php

namespace App\Twig\Components;

use App\Repository\ProductRepository;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
class ProductSearch
{
    use DefaultActionTrait;

    // writable: true allows the frontend to modify this property
    // url: true syncs the value with ?query= in the address bar
    #[LiveProp(writable: true, url: true)]
    public string $query = '';

    #[LiveProp(writable: true)]
    public string $category = 'all';

    public function __construct(
        private ProductRepository $productRepository,
    ) {
    }

    public function getProducts(): array
    {
        if (strlen($this->query) < 2) {
            return [];
        }

        return $this->productRepository->search(
            query: $this->query,
            category: $this->category === 'all' ? null : $this->category,
            limit: 20,
        );
    }
}
```

Das Attribut `#[AsLiveComponent]` verwandelt eine PHP-Klasse in eine dynamische Komponente. Eigenschaften, die mit `#[LiveProp(writable: true)]` markiert sind, können vom Frontend über `data-model`-Attribute im HTML verändert werden. Die Option `url: true` aktiviert Deep Linking, sodass Benutzer URLs mit bereits angewandten Filtern teilen können.

Das zugehörige Twig-Template verwendet die `data-model`-Direktive, um Eingabefelder an die Komponenteneigenschaften zu binden:

```twig
{# templates/components/ProductSearch.html.twig #}
<div {{ attributes }}>
    <input
        type="search"
        data-model="debounce(300)|query"
        placeholder="Search products..."
        class="form-input w-full"
    />

    <select data-model="category" class="form-select mt-2">
        <option value="all">All categories</option>
        <option value="electronics">Electronics</option>
        <option value="books">Books</option>
    </select>

    <div class="mt-4">
        {% for product in this.products %}
            <div key="{{ product.id }}" class="border-b py-2">
                <h3>{{ product.name }}</h3>
                <span>{{ product.price|format_currency('EUR') }}</span>
            </div>
        {% else %}
            {% if query|length >= 2 %}
                <p>No results for "{{ query }}".</p>
            {% endif %}
        {% endfor %}
    </div>
</div>
```

Der Modifikator `debounce(300)` stellt sicher, dass Anfragen an den Server erst nach 300 ms Inaktivität gesendet werden. Dies vermeidet eine Überlastung des Backends während der Eingabe. Diese Technik ist besonders relevant für [Symfony-Interviewfragen](/technologies/symfony/interview-questions/events-subscribers) zur Performance-Optimierung.

## Warenkorb-Implementierung mit LiveAction

Während `LiveProp` reaktive Eigenschaften verwaltet, ermöglicht `#[LiveAction]` die Erstellung von Methoden, die auf Benutzeraktionen wie Button-Klicks reagieren. Die Warenkorb-Komponente demonstriert die Koordination mehrerer Aktionen und die Kommunikation zwischen Komponenten.

```php
<?php
// src/Twig/Components/ShoppingCart.php

namespace App\Twig\Components;

use App\Entity\CartItem;
use App\Service\CartService;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveAction;
use Symfony\UX\LiveComponent\Attribute\LiveArg;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\ComponentToolsTrait;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
class ShoppingCart
{
    use DefaultActionTrait;
    use ComponentToolsTrait;

    #[LiveProp]
    public array $items = [];

    public function __construct(
        private CartService $cartService,
    ) {
    }

    #[LiveAction]
    public function addItem(#[LiveArg] int $productId, #[LiveArg] int $quantity = 1): void
    {
        $this->cartService->add($productId, $quantity);
        $this->items = $this->cartService->getItems();

        // Notify other components on the page
        $this->emit('cart:updated', [
            'count' => count($this->items),
        ]);
    }

    #[LiveAction]
    public function removeItem(#[LiveArg] int $itemId): void
    {
        $this->cartService->remove($itemId);
        $this->items = $this->cartService->getItems();
        $this->emit('cart:updated', ['count' => count($this->items)]);
    }

    public function getTotal(): float
    {
        return array_sum(array_map(
            fn(CartItem $item) => $item->getPrice() * $item->getQuantity(),
            $this->items,
        ));
    }
}
```

Die Methode `emit()`, bereitgestellt durch das `ComponentToolsTrait`, ermöglicht es Komponenten, Events auszulösen, auf die andere Komponenten reagieren können. Diese Funktionalität ist entscheidend für die Erstellung komplexer Interfaces, bei denen mehrere Komponenten ohne direkte Kopplung kommunizieren müssen.

```twig
{# templates/components/ShoppingCart.html.twig #}
<div {{ attributes }}>
    <h2>Cart ({{ items|length }})</h2>

    {% for item in items %}
        <div key="{{ item.id }}" class="flex justify-between py-2">
            <span>{{ item.name }} x{{ item.quantity }}</span>
            <span>{{ (item.price * item.quantity)|format_currency('EUR') }}</span>
            <button {{ live_action('removeItem', { itemId: item.id }) }}
                    class="text-red-600">
                Remove
            </button>
        </div>
    {% endfor %}

    <div class="border-t pt-2 font-bold">
        Total: {{ this.total|format_currency('EUR') }}
    </div>
</div>
```

Die Twig-Funktion `live_action()` generiert die notwendigen HTML-Attribute, um Button-Klicks mit `#[LiveAction]`-Methoden in der PHP-Komponente zu verknüpfen. Dieser deklarative Ansatz eliminiert die Notwendigkeit, JavaScript-Event-Listener manuell zu schreiben.

## Integration mit Symfony Forms und Validierung

Eine der leistungsstärksten Eigenschaften der Live Components ist die native Integration mit dem Symfony-Formularsystem. Das Trait `ComponentWithFormTrait` ermöglicht die Erstellung von Formularen mit Echtzeit-Validierung ohne Seitenaktualisierung, wobei die gesamte Validierungslogik zentral in PHP verbleibt.

```php
<?php
// src/Twig/Components/RegistrationForm.php

namespace App\Twig\Components;

use App\Entity\User;
use App\Form\RegistrationType;
use Doctrine\ORM\EntityManagerInterface;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Form\FormInterface;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveAction;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\ComponentWithFormTrait;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
class RegistrationForm extends AbstractController
{
    use DefaultActionTrait;
    use ComponentWithFormTrait;

    #[LiveProp]
    public ?User $initialFormData = null;

    protected function instantiateForm(): FormInterface
    {
        return $this->createForm(RegistrationType::class, $this->initialFormData ?? new User());
    }

    #[LiveAction]
    public function save(EntityManagerInterface $em): mixed
    {
        // Submits + validates — re-renders with errors if invalid
        $this->submitForm();
        $user = $this->getForm()->getData();

        $em->persist($user);
        $em->flush();

        $this->addFlash('success', 'Account created.');

        return $this->redirectToRoute('app_login');
    }
}
```

Die Methode `instantiateForm()` wird automatisch vom Trait aufgerufen und muss die Symfony-Formular-Instanz zurückgeben. `submitForm()` führt die vollständige Validierung gemäß den definierten Constraints durch und rendert die Komponente mit Fehlermeldungen neu, falls die Validierung fehlschlägt.

```twig
{# templates/components/RegistrationForm.html.twig #}
<div {{ attributes }}>
    {{ form_start(form, {
        attr: {
            'data-action': 'live#action:prevent',
            'data-live-action-param': 'save'
        }
    }) }}
        {{ form_row(form.email) }}
        {{ form_row(form.plainPassword, { label: 'Password' }) }}
        {{ form_row(form.fullName) }}

        <button type="submit"
                class="btn-primary w-full"
                data-loading="addAttribute(disabled) addClass(opacity-50)">
            <span data-loading="hide">Create Account</span>
            <span data-loading="show" class="animate-spin">Loading...</span>
        </button>
    {{ form_end(form) }}
</div>
```

Das Attribut `data-loading` ermöglicht die Steuerung visueller Zustände während AJAX-Anfragen und liefert dem Benutzer sofortiges Feedback. Diese Funktionalität ist besonders wichtig in Anwendungen, bei denen Operationen einige Sekunden dauern können.

## Verzögertes Laden und Lazy Loading von Komponenten

Komponenten, die aufwändige Datenbankabfragen oder Aufrufe externer APIs durchführen, können die anfängliche Ladezeit der Seite negativ beeinflussen. UX 3.0 führte ausgefeilte Strategien für verzögertes Laden ein, die die wahrgenommene Performance erheblich verbessern.

```php
<?php
// src/Twig/Components/AnalyticsDashboard.php

namespace App\Twig\Components;

use App\Service\AnalyticsService;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
class AnalyticsDashboard
{
    use DefaultActionTrait;

    #[LiveProp]
    public string $period = '30d';

    public function __construct(
        private AnalyticsService $analytics,
    ) {
    }

    public function getMetrics(): array
    {
        // Expensive query — runs only after page load
        return $this->analytics->getMetrics($this->period);
    }
}
```

Um das verzögerte Laden zu aktivieren, wird das `loading`-Attribut beim Einbinden der Komponente im Template verwendet:

```twig
{# Parent page: load the dashboard after the page renders #}
<twig:AnalyticsDashboard loading="defer" period="30d" />

{# Or load when scrolled into view #}
<twig:AnalyticsDashboard loading="lazy" period="30d" />
```

Die Option `loading="defer"` rendert zunächst einen leeren Platzhalter und lädt die eigentliche Komponente per AJAX, nachdem das DOM vollständig geladen ist. `loading="lazy"` nutzt die Intersection Observer API, um die Komponente erst zu laden, wenn sie im Viewport des Benutzers erscheint.

Für einen individuellen Platzhalter während des Ladevorgangs definiert man ein `placeholder`-Makro im Template der Komponente:

```twig
{# templates/components/AnalyticsDashboard.html.twig #}
<div {{ attributes }}>
    <h2>Analytics — {{ period }}</h2>
    {% for metric in this.metrics %}
        <div class="stat-card">
            <span class="stat-label">{{ metric.label }}</span>
            <span class="stat-value">{{ metric.value|number_format }}</span>
        </div>
    {% endfor %}
</div>

{% macro placeholder(props) %}
    <div class="animate-pulse space-y-4">
        <div class="h-6 bg-gray-200 rounded w-1/3"></div>
        <div class="h-20 bg-gray-200 rounded"></div>
        <div class="h-20 bg-gray-200 rounded"></div>
    </div>
{% endmacro %}
```

Diese Technik ist entscheidend für die Optimierung von Anwendungen mit komplexen Dashboards oder umfangreichen Berichten – ein Thema, das häufig in [Symfony-Interviewfragen](/blog/symfony/symfony-interview-questions) zur Performance behandelt wird.

## Kommunikation zwischen Komponenten mit LiveListener

Das Event-System der Live Components ermöglicht entkoppelte Architekturen, bei denen Komponenten über Nachrichten kommunizieren. Das Attribut `#[LiveListener]` definiert Methoden, die automatisch ausgeführt werden, wenn bestimmte Events emittiert werden.

```php
<?php
// src/Twig/Components/CartBadge.php

namespace App\Twig\Components;

use App\Service\CartService;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveListener;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
class CartBadge
{
    use DefaultActionTrait;

    #[LiveProp]
    public int $count = 0;

    public function __construct(CartService $cartService)
    {
        $this->count = $cartService->getItemCount();
    }

    // Automatically re-renders when ShoppingCart emits 'cart:updated'
    #[LiveListener('cart:updated')]
    public function onCartUpdated(#[LiveArg] int $count): void
    {
        $this->count = $count;
    }
}
```

Wenn die `ShoppingCart`-Komponente Artikel hinzufügt oder entfernt, emittiert sie das Event `cart:updated` mit der neuen Anzahl. Die `CartBadge`-Komponente, die sich an beliebiger Stelle auf der Seite befinden kann (typischerweise im Header), lauscht auf dieses Event und aktualisiert ihre Anzeige automatisch – ohne zusätzlichen JavaScript-Code.

Diese eventbasierte Architektur erleichtert die Wartung komplexer Anwendungen und fördert die Wiederverwendbarkeit von Komponenten – fundamentale Prinzipien moderner Symfony-Entwicklung.

## Wesentliche Änderungen in Symfony UX 3.0

Das Release von Symfony UX 3.0 brachte signifikante Änderungen mit sich, die Sicherheit, Performance und Entwicklererfahrung verbessern. Die folgende Tabelle fasst die wichtigsten Neuerungen zusammen:

| Änderung | Vorher (2.x) | Nachher (3.0) |
|----------|-------------|---------------|
| CSRF-Schutz | `csrf: true` bei `#[AsLiveComponent]` | Same-Origin/CORS (automatisch) |
| Twig CVA-Funktion | `cva()` | `html_cva()` aus twig/html-extra 3.12+ |
| Komponentenstandards | Optional | `twig_component.defaults` obligatorisch |
| Entfernte Pakete | Swup, LazyImage, Typed, TogglePassword | Native APIs oder UX Toolkit |
| PHP-Anforderung | 8.1+ | 8.4+ |
| Symfony-Anforderung | 6.4+ | 7.4+ |

Die Ablösung des expliziten CSRF-Schutzes durch automatische Same-Origin-Policies vereinfacht die Konfiguration von Komponenten. Die Funktion `html_cva()` ersetzt die bisherige `cva()` und erfordert die Installation des Pakets `twig/html-extra` 3.12+.

Pakete, die zuvor im UX 2.x enthalten waren, wurden zugunsten nativer Browser-APIs entfernt oder ins UX Toolkit migriert. Diese Entscheidung reduziert die Größe des JavaScript-Bundles und verbessert die Kompatibilität mit modernen Build-Tools.

Die erhöhten Mindestanforderungen an PHP 8.4+ und Symfony 7.4+ ermöglichen es UX 3.0, moderne Sprachfeatures wie readonly-Properties, erweiterte Enums und Performance-Verbesserungen des JIT-Compilers zu nutzen.

## Fortgeschrittene Anwendungsfälle und empfohlene Muster

Über die grundlegenden Beispiele hinaus unterstützen Live Components fortgeschrittene Muster, die gängige Herausforderungen in der modernen Webentwicklung lösen. Die Kombination mehrerer `#[LiveProp]`-Eigenschaften, bedingter Validierung und Integration mit externen Services ermöglicht es, reichhaltige Benutzererlebnisse ohne unnötige Komplexität zu schaffen.

Ein verbreitetes Muster ist die Erstellung von Autocomplete-Komponenten, die externe APIs abfragen, während der Benutzer tippt, intelligentes Caching implementieren, um doppelte Anfragen zu vermeiden, und kontextbezogene Vorschläge basierend auf dem Benutzerverhalten anzeigen. Dieser Komponententyp demonstriert die Flexibilität des Systems bei der Kombination von reaktivem Zustand, asynchronen Aktionen und Kommunikation mit anderen Komponenten.

Ein weiterer fortgeschrittener Anwendungsfall sind mehrstufige Formulare, bei denen jeder Schritt des Wizards eine unabhängige Live-Komponente ist, die ihre eigenen Geschäftsregeln validiert, aber den globalen Zustand über einen Session-Service teilt. Diese Architektur hält jede Komponente auf eine einzelne Verantwortung fokussiert und bewahrt gleichzeitig eine flüssige Benutzererfahrung.

Für Enterprise-Anwendungen, die vollständiges Auditing erfordern, lassen sich Live Components mit Symfony Event Subscribers kombinieren, um alle Benutzeraktionen, Änderungszeitstempel und vorherige Eigenschaftszustände automatisch zu protokollieren. Diese Integration zeigt, wie sich UX 3.0 nahtlos in das ausgereifte Symfony-Ökosystem einfügt, ohne inkompatible Abstraktionen einzuführen.

## Fazit: Die Zukunft reaktiver Interfaces in PHP

Symfony Live Components stellen einen Paradigmenwechsel in der Entwicklung von Webanwendungen mit PHP dar. Indem sie die Notwendigkeit eliminieren, komplexen JavaScript-Code für gängige reaktive Funktionalitäten zu schreiben, ermöglicht die Bibliothek PHP-Entwicklern, ihr gesamtes Wissen über das Symfony-Ökosystem zu nutzen, um moderne und responsive Oberflächen zu erstellen.

Das Release von UX 3.0 hat die Bibliothek als ausgereifte, produktionsreife Lösung etabliert – mit signifikanten Verbesserungen bei Sicherheit, Performance und Entwicklererfahrung. Die native Integration mit Symfony Forms, das ausgefeilte System für verzögertes Laden und die eventbasierte Architektur liefern die notwendigen Werkzeuge, um komplexe Anwendungen zu bauen, ohne die Wartbarkeit zu opfern.

Für Entwickler, die sich im Symfony-Ökosystem vertiefen möchten, ist die Beherrschung von Live Components sowohl für praktische Projekte als auch für technische Bewerbungsgespräche essenziell. Die Fähigkeit, reaktive Interfaces ohne schwere JavaScript-Frameworks zu erstellen, demonstriert fortgeschrittenes Plattformwissen und Übereinstimmung mit modernen Webentwicklungstrends.

Die Zukunft der Web-Interfaces in PHP konzentriert sich zunehmend auf Lösungen, die die Logik auf dem Server belassen und gleichzeitig Benutzererfahrungen bieten, die mit JavaScript-SPAs vergleichbar sind. Live Components und UX 3.0 führen diese Transformation an und bieten Symfony-Entwicklern die Werkzeuge, um mit modernen Frontend-Frameworks zu konkurrieren – bei gleichzeitigem Erhalt der Vorteile serverseitiger Architektur.

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/de/blog/symfony/symfony-live-components-ux-3-reactive-apps-without-javascript