
Posted on • Originally published atrailsdesigner.com
Hotwire and Stimulus Tools You Need to Know
This articles was originally published on [Rails Designer](https://railsdesigner.com/best-hotwire-stimulus-tools/
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
Thispower 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 relatedRails 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 callCurrent.environment
.
Looks niche maybe, but together with Turbo Streams Broadcast, that can't have any user specifics, I hhave found plenty of use cases forCurrent.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:
exportdefaultclassextendsApplicationController{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">
.
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 below. 👇
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse