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;
#[AsLiveComponent()]
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 }}>
    <input
        type="text"
        data-model="query"
        placeholder="Results update as you type..."
        class="form-control"
    >

    {% 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 %}
        </div>
    {% else %}
        <div class="pt-3">Ah! No packages found matching "{{ query }}"</div>
    {% endif %}
</div>
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