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><- 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 PackagesUX 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