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
#[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"
>
{% 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 %}
</div>
{% else %}
<div class="pt-3">Ah! No packages found matching "{{ query }}"</div>
{% endif %}
</div>
![Symfony logo](/assets/images/sf-logo-3265ea3b39f6dabefbc6fecc2c87111d.png)
Live Components
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](/assets/images/live_demo/infinite-scroll-2-26bfbef622a8ed3b4517add2101a7017.png)
Infinite Scroll - 2/2
Loading on-scroll, flexible layout grid, colorfull loading animations and... more T-Shirts!
![Infinite Scroll - 1/2 demo preview](/assets/images/live_demo/infinite-scroll-b76b7339ccb55335e3b033b7de008a25.png)
Infinite Scroll - 1/2
Load more items as you scroll down the page.
![Live Memory Card Game demo preview](/assets/images/live_demo/live-memory-fa1b7e0f275e56d335865f90b2a8538c.png)
Live Memory Card Game
A Memorable Game UX with Live Components!
![Auto-Validating Form demo preview](/assets/images/live_demo/auto-validating-form-11fcaf52ca0cdfe3ca49e8105861600b.png)
Auto-Validating Form
Create a form that validates each field in-real-time as the user enters data!
![Embedded CollectionType Form demo preview](/assets/images/live_demo/form-collection-type-6e521d081ba1cc258c50d332c9da9e03.png)
Embedded CollectionType Form
Create embedded forms with functional "add" and "remove" buttons all in Twig.
![Dependent Form Fields demo preview](/assets/images/live_demo/dependent-form-fields-aa9f88b2ec1c3d865f4831bcbf0ddd0c.png)
Dependent Form Fields
After selecting the first field, automatically reload the options for a second field.
![Up & Down Voting demo preview](/assets/images/live_demo/voting-4605968cb78b3f30f3821e2b6a02d2e5.png)
Up & Down Voting
Save up & down votes live in pure Twig & PHP.
![Inline Editing demo preview](/assets/images/live_demo/inline-edit-255ad2c7e94e0eebc1c54d1131c51141.png)
Inline Editing
Activate an inline editing form with real-time validation.
![Auto-Updating Chart demo preview](/assets/images/live_demo/chartjs-0067efa05ca9d75d3078e9fd1d5fa31e.png)
Auto-Updating Chart
Render & Update a Chart.js chart in real-time.
![Invoice Creator demo preview](/assets/images/live_demo/invoice-f427c466daf162f1d8bb97d4da19ff7d.png)
Invoice Creator
Create an invoice + line items that updates as you type.
![Product Form + Category Modal demo preview](/assets/images/live_demo/product-form-6ae0cf47925dcdf4bdb2ec0308a877ac.png)
Product Form + Category Modal
Create a Category on the fly - from inside a product form - via a modal.
![Uploading files demo preview](/assets/images/live_demo/upload-7de12ec2d1e0ec7c2af368c63c7e067d.png)
Uploading files
Upload file from your live component through a LiveAction.