Add interaction with Stimulus

A modest JavaScript framework for the HTML you already have.

Hotwire Stimulus

Stimulus connects JavaScript behavior to your HTML using simple data attributes. Controllers respond to DOM events and can interact with targets and values defined in your markup.

Example: implement keyboard navigation

As an example of adding interaction, implement hotkeys to navigate faster between pages:

content/pages/stimulus.md

...

→ <%= link_to_page "importmap", data: { controller: "hotkey", action: "keydown.right@document->hotkey#click" } %>

_← <%= link_to_page "turbo", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } %>_

Create the Stimulus controller

app/javascript/controllers/hotkey_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  click(event) {
    event.preventDefault()
    this.element.click()
  }
}

Try it now with left and right keys!

Commit: Stimulus

→ Manage dependencies with Importmap

← Accelerate with Turbo