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
templates/main/homepage.html.twig 
<div data-controller="markdown">
    <textarea
        data-markdown-target="input"
    >Writing JavaScript is a **dream** with Stimulus 🤩</textarea>
    <button data-action="markdown#render">
        Convert <twig:Icon/>
        </button>
        <div data-markdown-target="preview">
            <small>(click "Convert")</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;
    }
}
(click "Convert")

Packages

Install extra Packages

Browse all Packages

Turbo

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

Live Components

Build dynamic interfaces with zero JavaScript

Autocomplete

Ajax-powered, auto-completable select elements

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

Lazy Image

Optimize Image Loading with BlurHash

Twig Components

Create PHP classes that can render themselves

Stylized Dropzone

Form type for stylized "drop zone" for file uploads

Swup Integration

Integration with the page transition library Swup

Notify

Trigger native browser notifications from inside PHP

Toggle Password

Switch the visibility of a password field

Typed

Animated typing with Typed.js

Translator

Use Symfony's translations in JavaScript