curated by symfony

JavaScript tools you can't live without.

A set of PHP & JavaScript packages to solve every day frontend problems featuring Stimulus and Turbo.

Install it

$ composer require symfony/asset-mapper symfony/stimulus-bundle
  • assets
    • bootstrap.js
    • app.js
    • controllers.json
    • controllers
      • hello_controller.js
    • styles
      • app.css
  • package.json
  • webpack.config.js

Stimulus Controllers

Write custom JavaScript inside Stimulus Controllers

Read full Documentation
<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>
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;
    }
}
And you have a Markdown live convertor!
<- Write something in the textarea!

Packages

Install UX Components

Browse all Packages

UX Icons

Render SVG icons seamlessly from your Twig templates.

UX Map

Render interactive Maps in PHP with Leaflet or Google Maps.

Twig Components

Create PHP classes that can render themselves

Live Components

Build dynamic interfaces with zero JavaScript

Turbo

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

Autocomplete

Ajax-powered, auto-completable select elements

Translator

Use Symfony's translations in JavaScript

Chart.js

Easy charts with Chart.js

React

Quickly render <React /> components & pass them props.

Vue.js

Quickly render <Vue /> components & pass them props.

Svelte

Quickly render <Svelte /> components & pass them props.

Image Cropper

Form Type and tools for cropping images