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 statements hidden - click to show use App\Service\PackageRepository;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;
class SearchPackages
    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 }}>
        placeholder="Results update as you type..."

    {% if computed.packages|length > 0 %}
        <div data-loading="addClass(opacity-50)" class="mt-3 row">
            {% for package in computed.packages %}
                {{ include('main/_package_in_list.html.twig') }}
            {% endfor %}
    {% else %}
        <div class="pt-3">Ah! No packages found matching "{{ query }}"</div>
    {% endif %}
Symfony logo

Live Components

Install It

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

Live Component Demos

Find out what else you can build

Read full Documentation