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;
}
}
Packages
Install extra Packages
Browse all Packages![Image for the Turbo UX package](/assets/images/ux_packages/turbo-1936452dc2d2eb26d6a525df17d52e1f.png)
Turbo
Integration with Turbo for single-page-app and real-time experience
UX Icons
Render SVG icons seamlessly from your Twig templates.
![Image for the Twig Components UX package](/assets/images/ux_packages/twig-component-27e6494ff63cbeb648bae846194ac851.png)
Twig Components
Create PHP classes that can render themselves
![Image for the Live Components UX package](/assets/images/ux_packages/live-component-60e3f39bf8be67d83affc0294d9b8e8f.png)
Live Components
Build dynamic interfaces with zero JavaScript
![Image for the Autocomplete UX package](/assets/images/ux_packages/autocomplete-3d5f6a926ca80a126536de6668671ec7.png)
Autocomplete
Ajax-powered, auto-completable select
elements
Translator
Use Symfony's translations in JavaScript
![Image for the Chart.js UX package](/assets/images/ux_packages/chartjs-b212e3c799c9d0647754378e8d24839f.png)
Chart.js
Easy charts with Chart.js
![Image for the React UX package](/assets/images/ux_packages/react-027742d635a932818027ab0b942add81.png)
React
Quickly render <React />
components & pass them props.
![Image for the Vue.js UX package](/assets/images/ux_packages/vue-162ad33a0e8ca1a15b60f5e6a8b65719.png)
Vue.js
Quickly render <Vue />
components & pass them props.
Svelte
Quickly render <Svelte />
components & pass them props.
![Image for the Image Cropper UX package](/assets/images/ux_packages/cropperjs-b4e56c8fac5f8a2042a27f0f17fce03a.png)
Image Cropper
Form Type and tools for cropping images
![Image for the Lazy Image UX package](/assets/images/ux_packages/lazy-image-a35c94918bdc3903986ae9fcea54037d.png)
Lazy Image
Optimize Image Loading with BlurHash
![Image for the Stylized Dropzone UX package](/assets/images/ux_packages/dropzone-583f7e392d51b923222101e76ff80c25.png)
Stylized Dropzone
Form type for stylized "drop zone" for file uploads
![Image for the Swup Integration UX package](/assets/images/ux_packages/swup-d618ca2f6069f7c75f80e8be5148ff4d.png)
Swup Integration
Integration with the page transition library Swup
![Image for the Notify UX package](/assets/images/ux_packages/notify-8e3d3e40fe3655d02a6a6fda82c7c445.png)
Notify
Trigger native browser notifications from inside PHP
![Image for the Toggle Password UX package](/assets/images/ux_packages/toggle-password-21d644c19b0828edd6804c0d79b6d710.png)
Toggle Password
Switch the visibility of a password field
![Image for the Typed UX package](/assets/images/ux_packages/typed-a85651ada1c71f62168eb71f8f84671b.png)
Typed
Animated typing with Typed.js