A modest JavaScript framework for the HTML you already have.
Sprinkle your HTML with controller, target, and action attributes:
<!--HTML from anywhere-->
<div data-controller="hello">
<input data-hello-target="name" type="text">
<button data-action="click->hello#greet">
Greet
</button>
<span data-hello-target="output">
</span>
</div>
Write a compatible controller and watch Stimulus bring it to life:
// hello_controller.js
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "name", "output" ]
greet() {
this.outputTarget.textContent =
`Hello, ${this.nameTarget.value}!`
}
}
Current version: 3.2.2 — released August 7th 2023