Interaction

Stimulus Controllers

Attach small browser controllers to server-rendered markup.

By Guillermo Alvarez - Published Updated

Create a controller file

Put Stimulus source under app/js/controllers:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    this.element.dataset.ready = "true"
  }
}

For this path:

app/js/controllers/hello_controller.js

GoLazy registers the identifier:

hello

Attach it in a template

Server-rendered markup activates the controller:

<div data-controller="hello">
  Hello from GoLazy
</div>

Nested directories use -- in identifiers. Underscores in filenames become dashes.

Regenerate JavaScript

Run the JavaScript pipeline after changing controller source:

lazy js

During lazy development, apps with js.toml run this pipeline during the development loop when JavaScript inputs change.