All Demos

Discover all that Symfony UX offers through our collection of demos!
Source code is provided for each demo: PHP, Twig, JS, and CSS.

Remove a LiveComponent after its final render, with an optional CSS exit animation.

remove animation LiveAction LiveResponse

Download from a route or send generated content while preserving state and events.

file download events LiveAction

Loading on-scroll, flexible layout grid, colorfull loading animations and... more T-Shirts!

grid pagination loading scroll

Load more items as you scroll down the page.

grid pagination navigation

A Memorable Game UX with Live Components!

game time events LiveAction

Create a form that validates each field in-real-time as the user enters data!

form validation inline

Create embedded forms with functional "add" and "remove" buttons all in Twig.

form collection

After selecting the first field, automatically reload the options for a second field.

form field events

Save up & down votes live in pure Twig & PHP.

form LiveAction

Activate an inline editing form with real-time validation.

form inline LiveAction

Render & Update a Chart.js chart in real-time.

chart data LiveAction stimulus

Create an invoice + line items that updates as you type.

form entity events LiveAction

Create a Category on the fly - from inside a product form - via a modal.

form entity events modal

Upload file from your live component through a LiveAction.

form file upload LiveAction