Reactive Twig Templates

An Interactive UI entirely built in Twig

Your frontend Swiss Army Knife: build a highly-interactive UI from the comfort of Twig. No JS needed.



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

class SearchPackagesComponent
    use DefaultActionTrait;

    #[LiveProp(writable: true)]
    public ?string $query = null;

    public function __construct(private PackageRepository $packageRepo)

    public function getPackages(): array
        return $this->packageRepo->findAll($this->query);


<div{{ attributes }}>

    {% if this.packages|length > 0 %}
        <div data-loading="addClass(opacity-50)">
            {% for package in this.packages %}
                    <h4>{{ package.humanName }}</h4>
            {% endfor %}
    {% else %}
        <div>Ah! No packages found matching "{{ query }}"</div>
    {% endif %}
Symfony logo

Live Components

Install It

$ composer require ux symfony/ux-live-component
$ npm install --force
$ npm run watch

Live Component Demos

Find out what else you can build

Read full Documentation