Hotwire and Stimulus Tools You Need to Know

The Hotwire/Turbo/Stimulus community is not as big as React or even Vue. But it has some dedicated users—yours truly included—that have built and shared some cool tools and extra’s.

In this article I want to list some nifty, smart or otherwise cool extensions/tools for Hotwire/Stimulus. This article will be updated whenever I stumble upon something new.

Turbo Power

This power pack extends the default Turbo Stream actions (append, update, replace, etc.) with many other useful actions. From (meta) title update to updating a data attribute and from toggling css to set a value in local storage.

Just add it using your favorite package manager to get all these goodies. Comes with a related Rails gem too.

Stimulus FX

This enhanced to Stimulus from Rails Designer adds custom action options. Stimulus comes with three custom action out-of-the-box: prevent, stop and self. Check out this article on how custom action for Stimulus work. Stimulus FX adds a few more custom action options: throttled, withConfirm, withKey and whenOutside.

Check it out on GitHub

Current.js

This tiny library gives you a similar logic as Rails’ CurrentAttributes, but for Rails. You defined certain values as meta tags, eg. <meta name="current-environment" content="production"> and then in your JavaScript you call Current.environment.

Looks niche maybe, but together with Turbo Streams Broadcast, that can’t have any user specifics, I have found plenty of use cases for Current.js.

Debounced

This is a useful library to run actions with a debounce (delaying executing a function until a pause in triggering events occurs). Without this library you would do something like this in Stimulus Controller:

export default class extends ApplicationController {
  initialize() {
    this.debouncedUpdate = debounce(this.update.bind(this))
  }

  update() {
    // logic here
  }
}

With this library, you can write <input type="text" data-controller="editor" data-action="debounced:input->editor#update">.

Check it out.

Rails and Hotwire Developer Tool

This small tool from Rails Designer lets you move faster around your app’s front end. It has the following features:

• view turbo-frames and their id’s;
• view stimulus controller and their names;
• toggle the (web)console (instead of switching to the CLI);
• auto-fill forms with a predefined set of values.

That’s it so far. Do you have (built) any tool that should be listed here? Share it with me.