Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Hotwire and Stimulus Tools You Need to Know
Rails Designer
Rails Designer

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}}
Enter fullscreen modeExit fullscreen mode

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 below. 👇

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

I help teams around the world make their Rails apps a bit nicer to maintain and look at. 🎨 Also kickstart SaaS' in a month. 👷 And built a Rails UI Components library, used by 1000+ developers. 🚀
  • Location
    Amsterdam, The Netherlands
  • Joined

More fromRails Designer

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp