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/webpack-encore-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

templates/anything.html.twig

<div {{ stimulus_controller('markdown') }}>
    <textarea
        {{ stimulus_target('markdown', 'input') }}
    >Writing JavaScript is a **dream** with Stimulus 🤩</textarea>

    <button {{ stimulus_action('markdown', 'render') }}>
        Render Markdown
    </button>

    <div {{ stimulus_target('markdown', 'preview') }} ></div>
</div>

assets/controllers/markdown_controller.js

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;
    }
}
(click "Convert")

Components

Install extra Components

Browse all Components