Real-time UIs without JavaScript

This is a complete live search: results update as the user types, and you won't write a single line of JavaScript. The #[AsLiveComponent] attribute makes this class a Live Component, and #[LiveProp] exposes a property that the browser can update.

In the template, data-model binds the input to that property. On every keystroke, the component re-renders itself on the server via Ajax and the HTML updates in place.

The template just renders the current state with a normal Twig loop. Forms with live validation, dependent selects, embedded components, real-time updates: it's all server-side PHP.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27<?phpnamespace App\Twig\Components;use App\Repository\ProductRepository;use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;use Symfony\UX\LiveComponent\Attribute\LiveProp;use Symfony\UX\LiveComponent\DefaultActionTrait;#[AsLiveComponent]class ProductSearch{    use DefaultActionTrait;    #[LiveProp(writable: true)]    public string $query = '';    public function __construct(        private ProductRepository $products,    ) {    }    public function getProducts(): array    {        return $this->products->search($this->query);    }}

1
2
3
4
5
6
7
8
9
10
11<div {{ attributes }}>    <input data-model="query" placeholder="Search products...">    <ul>        {% for product in this.products %}            <li>{{ product.name }}</li>        {% else %}            <li>No products found</li>        {% endfor %}    </ul></div>