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.
composer require symfony/ux-live-component// ... use statements hidden - click to show
#[AsLiveComponent]
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') }}
{% endfor %}
</div>
{% else %}
<div class="pt-3">Ah! No packages found matching "{{ query }}"</div>
{% endif %}
</div>
Live Components
Install It
$ composer require symfony/ux-live-componentLive Component Demos
Find out what else you can build
Read full Documentation
Auto-Validating Form
Create a form that validates each field in-real-time as the user enters data!
Infinite Scroll - 1/2
Load more items as you scroll down the page.
LiveMemory Card Game
A Memorable Game UX with Live Components!
Embedded CollectionType Form
Create embedded forms with functional "add" and "remove" buttons all in Twig.
Dependent Form Fields
After selecting the first field, automatically reload the options for a second field.
Up & Down Voting
Save up & down votes live in pure Twig & PHP.
Inline Editing
Activate an inline editing form with real-time validation.
Auto-Updating Chart
Render & Update a Chart.js chart in real-time.
Invoice Creator
Create an invoice + line items that updates as you type.
Product Form + Category Modal
Create a Category on the fly - from inside a product form - via a modal.
Uploading files
Upload file from your live component through a LiveAction.