Symfony UX: a new JavaScript ecosystem for Symfony

Symfony UX is an initiative and set of libraries to seamlessly integrate JavaScript tools into your application. For example, want to render a chart with Chart.js? Use UX Chart.js to build the chart in PHP. The JavaScript is handled for you automatically.

That's Symfony UX.

Read all the details about the Symfony UX initiative

Components of UX

Symfony UX leverages Stimulus for JavaScript and the Stimulus Bridge for integrating it into Webpack Encore.

Packages

• UX Chart.js: Chart.js chart library integration for Symfony
• UX Cropper.js: Cropper.js image cropper library integration for Symfony
• UX Dropzone: File input drag-and-drop zones for Symfony Forms
• UX LazyImage: Improve image loading performances through lazy-loading and data-uri thumbnails
• UX Swup: Swup page transition library integration for Symfony
• Twig Component: A system to build reusable "components" with Twig
• Live Component: Gives Twig Components a URL and a JavaScript library to automatically re-render via Ajax as your user interacts with it

Stimulus Tools around the World

Because Stimulus is used by developers outside of Symfony, many tools exist beyond the UX packages:

• stimulus-use: Add composable behaviors to your Stimulus controllers, like debouncing, detecting outside clicks and many other things. See: https://stimulus-use.github.io/stimulus-use/#/

• stimulus-components: A large number of pre-made Stimulus controllers, like for Copying to clipboard, Sortable, Popover (similar to tooltips) and much more.

Let's build an amazing ecosystem together

Symfony UX is an initiative: its aim is to build an ecosystem. To achieve this, we need your help: what other packages could we create in Symfony UX? What about a library that automatically adds an input mask to the text fields of your Symfony forms? Or the ability to make the EntityType render with AJAX auto-completion? Anything you do in JavaScript could be done streamlined as a UX package.

We have some ideas and we will release more packages in the coming days. The rest is on you: let's create an amazing ecosystem together!

Contributing

If you want to test your code in an existing project that uses Symfony UX packages, you can use the link utility provided in this Git repository (that you have to clone). This tool scans the vendor/ directory of your project, finds Symfony UX packages it uses, and replaces them by symbolic links to the ones in the Git repository.

# Install required dependencies
$ composer install

# And link Symfony UX packages to your project
$ php link /path/to/your/project