Reactive Twig Templates

An Interactive UI
in PHP & Twig

Develop your interface.. from the comfort of Symfony.
No Javascript needed.

composer require symfony/ux-live-component
// ... use statements hidden - click to show
use App\Service\UxPackageRepository;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent('SearchPackages', template: 'components/Package/SearchPackages.html.twig')]
class SearchPackages
    use DefaultActionTrait;

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

    public function __construct(private UxPackageRepository $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', {package}) }}
            {% endfor %}
    {% else %}
        <div class="pt-3">Ah! No packages found matching "{{ query }}"</div>
    {% endif %}

Install It

$ composer require symfony/ux-live-component

Live Component Demos

Find out what else you can build

Read full Documentation
Infinite Scroll - 2/2 demo preview

Infinite Scroll - 2/2

Loading on-scroll, flexible layout grid, colorfull loading animations and... more T-Shirts!

grid pagination loading scroll

Auto-Validating Form demo preview

Auto-Validating Form

Create a form that validates each field in-real-time as the user enters data!

form validation inline

Dependent Form Fields demo preview

Dependent Form Fields

After selecting the first field, automatically reload the options for a second field.

form field events

Inline Editing demo preview

Inline Editing

Activate an inline editing form with real-time validation.

form inline LiveAction

Invoice Creator demo preview

Invoice Creator

Create an invoice + line items that updates as you type.

form entity events LiveAction

Uploading files demo preview

Uploading files

Upload file from your live component through a LiveAction.

form file upload LiveAction