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"
>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>
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;
}
}
Packages
Install extra Packages
Browse all PackagesTurbo
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