Symfony UX: JavaScript tools you'll love

$ 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

templates/main/homepage.html.twig

<div {{ stimulus_controller('markdown') }}>
    <textarea
        {{ stimulus_target('markdown', 'input') }}
    >Writing JavaScript is a **dream** with Stimulus 🤩</textarea>
    <button {{ stimulus_action('markdown', 'render') }}>
        Convert <i></i>
    </button>
    <div {{ stimulus_target('markdown', 'preview') }} >
        <small>(click "Convert")</small>
    </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;
    }
}