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.

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 hhave 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.