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/webpack-encore-bundle symfony/stimulus-bundle
$ npm install
$ npm run watch
-
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 {{ stimulus_controller('markdown') }}>
<textarea
{{ stimulus_target('markdown', 'input') }}
>Writing JavaScript is a **dream** with Stimulus 🤩</textarea>
<button
{{ stimulus_action('markdown', 'render') }}
>Convert <twig:Icon/></button>
<div {{ stimulus_target('markdown', 'preview') }} >
<small>(click "Convert")</small>
</div>
</div>
import { Controller } from '@hotwired/stimulus';
import snarkdown from 'snarkdown';
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
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