Stimulus.js has been an accelerant to my productivity as a Ruby on Rails developer. I’ve used Angular in the past, but it seemed like I had to go all in on Angular and relegate Rails to a dumb API. I love Rails, so this wasn’t going to be my selected solution.
However, since Stimulus launched, I’ve taken the time to learn it, and I thought I’d share some of what I’ve learned in a series of small tutorials. It’s given my apps the interactivity to rival any single page application framework, and I get to use all the Rails magic that makes it a joy to work in.
The following are a collection of my favorite tutorials. I hope they teach and inspire you to build world class web applications with a world class web framework.
Stimulus Pearls: A Collection of Stimulus.js Tutorials
How many web pages actually need a JS framework?
New to Stimulus.js?
Follow along with step by step instructions to learn all best practices I’ve discovered from my tutorials at onrails.blog. It’s become my first choice for adding rich interactivity to any project I’m working on.
Stimulus speeds up development and web app performance
And since you don’t need to rewrite the front end in the latest templating framework, you can focus on writing features, not rewriting forms.
22 Tutorials, updated with the latest version of Ruby on Rails and Stimulus.js. You’ll also receive the source code from all the tutorials, so you can run each example and dig through the internals.Get your copy here!
Here is a full list of my Stimulus.js Tutorials:
- Adding Tables to ActionText With Stimulus.js
- Radio Selection Unselect
- Building a PWA with Rails and Stimulus
- Convert your jQuery snippet to a Stimulus controller
- Stimulus.js & HOTWire Tutorial: Interactive Deletes
- Interactive Deletes with Rails UJS
- Stimulus + ActionCable + ActiveJob: Loading Asynchronous API Data
- Leaving Breadcrumbs in your Progressive Web App with Stimulus.js
- Using Stimulus.js to Subscribe to Many Channels in ActionCable
- Grabbing ActionCable with Stimulus.js
- Build a Markdown editor in Stimulus.js like in Vue.js
- Let’s Make An Editable Header Using Stimulus.js
- Use Stimulus and Trix to convert Emoji Short Codes to Unicode Characters
- Sticky Table Header
- Filter Data in a List or Table
- Update Model from a Checkbox (Original)
- Dragging and Dropping Items in a List
- Implementing Radio Selection In A Form
- Don’t Lose Unsaved Form Fields
- Don’t accidentally walk away from your Active Storage Uploads
- Let’s create a Trix Editor plugin using Stimulus.js
- Using multi select to pare down a large set of data
- Multiple Selects that Filter Enterprise Data Models