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 }}> <input type="text" data-model="query" placeholder="Results update as you type..." class="form-control" /> <div class="PackageList pt-3" data-loading="addClass(opacity-50)"> {% for package in computed.packages %} {{ include('components/Package/PackageListItem.html.twig', {package}) }} {% else %} No packages found "{{ query }}" {% endfor %} </div> </div> 

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