Curated by Symfony

JavaScript tools you can't live without.

PHP and JavaScript packages that solve everyday frontend problems, built on Stimulus and Turbo.

What Symfony UX gives you

  • Curated by Symfony

    One team, one release cadence, one set of conventions.

  • Stimulus at the core

    Controllers mount themselves on the markup you write.

  • Driven from Twig

    You stay in your templates, the JavaScript follows.

  • No bundler required

    AssetMapper serves them, Symfony Reprise bundles them.

  • Take what you need

    Each package installs on its own, nothing comes bundled.

One recipe, one command

Start with two packages.

AssetMapper serves your JavaScript straight from assets/, with no build step and no node_modules, and StimulusBundle wires every UX package that follows. The recipe writes the rest.

Already building with Vite or Rsbuild? Symfony Reprise gives them the Symfony integration Webpack Encore had, and UX packages work the same way.

Without a build step

$ composer require symfony/asset-mapper symfony/stimulus-bundle

With Vite or Rsbuild

$ composer require symfony/reprise
$ npm install @symfony/reprise --save-dev
What the recipe writes
  • assets
    • bootstrap.js
    • app.js
    • controllers.json
    • controllers
      • hello_controller.js
    • styles
      • app.css
  • package.json
  • vite.config.ts
  • rsbuild.config.ts

Your own JavaScript

A controller, and the markup that wakes it up.

A Stimulus controller is a plain class reacting to the DOM. Reference it from a data attribute and it connects itself, on the first render and on every Turbo visit.

templates/main/homepage.html.twig 
<div data-controller="markdown">
    <textarea
        data-markdown-target="input"
        data-action="markdown#render"
    >Writing _JavaScript_ is... a **dream** with Stimulus 🤩</textarea>
    <div data-markdown-target="preview">
        <small>&lt;- Write something in the textarea!</small>
    </div>
</div>
assets/controllers/markdown-controller.js 
import { Controller } from '@hotwired/stimulus';
import snarkdown from 'snarkdown';

/* stimulusFetch: 'lazy' */
export default class extends Controller {
    static targets = ['input', 'preview'];

    render(event) {
        const rendered = snarkdown(this.inputTarget.value);
        this.previewTarget.innerHTML = rendered;
    }
}
A Markdown live converter
<- Write something in the textarea!

Install the packages you need.

Browse all packages
Image for the Icons UX package

Icons

Render SVG icons seamlessly from your Twig templates.

Image for the Map UX package

Map

Render interactive Maps in PHP with Leaflet or Google Maps.

Image for the Twig Components UX package

Twig Components

Create PHP classes that can render themselves

Image for the Live Components UX package

Live Components

Build dynamic interfaces with zero JavaScript

Image for the Turbo UX package

Turbo

Integration with Turbo for single-page-app and real-time experience

Image for the Stimulus UX package

Stimulus

Integration with Stimulus for HTML-powered controllers

Image for the Toolkit UX package

Toolkit

Collection of components and templates that you can use to build your pages.

Image for the Native UX package

Native

Build native mobile apps that wrap your Symfony web application

Image for the Pagination UX package

Pagination

Paginate any data with numbered pages, lookahead, or cursors.

Image for the Autocomplete UX package

Autocomplete

Ajax-powered, auto-completable select elements

Image for the Translator UX package

Translator

Use Symfony's translations in JavaScript

Image for the Chart.js UX package

Chart.js

Easy charts with Chart.js

Or start from a whole UI kit.

Browse all UI Kits

Shadcn UI

Component based on the Shadcn UI library, one of the most popular design systems in JavaScript world.

Common

Design-system agnostic, ready-to-use Twig components for common Symfony needs, like logout links and links submitted as forms.

Bootstrap

Components based on Bootstrap 5.3, the world's most popular HTML, CSS, and JavaScript library for building responsive, mobile-first interfaces.

Flowbite v4

Component based on the Flowbite (v4) library, popular open-source library of interactive UI components built with the utility classes from Tailwind CSS.