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 use App\Service\UxPackageRepository;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;
#[AsLiveComponent]
class SearchPackages
{
    use DefaultActionTrait;

    #[LiveProp(writable: 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>

Install It

$ composer require symfony/ux-live-component
$ npm install --force
$ npm run watch

Live Component Demos

Find out what else you can build

Read full Documentation
Screenshot of the Auto-Validating Form demo

Auto-Validating Form

Create a form that validates each field in-real-time as the user enters data!
Screenshot of the Embedded CollectionType Form demo

Embedded CollectionType Form

Create embedded forms with functional "add" and "remove" buttons all in Twig.
Screenshot of the Dependent Form Fields demo

Dependent Form Fields

After selecting the first field, automatically reload the options for a second field.
Screenshot of the Up & Down Voting demo

Up & Down Voting

Save up & down votes live in pure Twig & PHP.
Screenshot of the Inline Editing demo

Inline Editing

Activate an inline editing form with real-time validation.
Screenshot of the Auto-Updating Chart demo

Auto-Updating Chart

Render & Update a Chart.js chart in real-time.
Screenshot of the Invoice Creator demo

Invoice Creator

Create an invoice + line items that updates as you type.
Screenshot of the Product Form + Category Modal demo

Product Form + Category Modal

Create a Category on the fly - from inside a product form - via a modal.
Screenshot of the Uploading files demo

Uploading files

Upload file from your live component through a LiveAction.