Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/skatkov/awesome-stimulusjs

Modestly awesome list of StimulusJS related content.
https://github.com/skatkov/awesome-stimulusjs

List: awesome-stimulusjs

awesome awesome-list stimulus-components stimulus-js

Last synced: about 1 month ago
JSON representation

Modestly awesome list of StimulusJS related content.

Awesome Lists containing this project

README 

        
# Awesome StimulusJS



  
Modestly awesome list of StimulusJS related content.


  


    Stimulus is, in many ways, the opposite of other modern frameworks available today. Here is what creators have to say about it:

  


  


  


    It doesn’t seek to take over your entire front-end—in fact, it’s not concerned with rendering HTML at all. Instead, it’s designed to augment your HTML with just enough behavior to make it shine.  (c)

  


  


  


    This repository aims to showcase what is possible with this approach and link any other helpful content for your modest JS journey.

  





## Contents



  - [Packages](#packages)

  - [Reading](#reading)

  - [Podcasts](#podcasts)

  - [Other Modest Code](#other-modest-code)

  - [Community](#community)



## Packages

- [StimulusReflex](https://github.com/hopsoft/stimulus_reflex) - Phoenix Liveview based on modern rails.

- [stimulus-image-grid](https://github.com/leastbad/stimulus-image-grid) - A StimulusJS controller for beautiful image grids.

- [stimulus-use](https://github.com/stimulus-use/stimulus-use) - A collection of composable behaviors for your StimulusJS Controllers.

- [stimulus-hotkeys](https://github.com/leastbad/stimulus-hotkeys) - A Stimulus controller for mapping keystrokes to behaviors

- [stimulus-existence](https://github.com/Circuit8/stimulus-existence) - Stimulus controller to remove elements from the dom, and be notified with an event when they are added.

- [stimulus-reveal](https://gitlab.com/initforthe/stimulus-reveal) - Stimulus controller to hide/show elements with optional transitions

- [stimulus-flatpickr](https://github.com/adrienpoly/stimulus-flatpickr) - A Wrapper for Flatpickr library.

- [tailwindcss-stimulus-components](https://github.com/excid3/tailwindcss-stimulus-components) - A set of StimulusJS components (tabs, dropdowns, modals, toggles, autosave, etc) for TailwindCSS users.

- [stimulus-validation](https://github.com/jwald1/stimulus-validation) - Validation controller for StimulusJS.

- [stimulus-autocomplete](https://github.com/afcapel/stimulus-autocomplete) - StimulusJS autocomplete component.

- [stimulus-tabs](https://github.com/jwald1/stimulus-tabs) - A simple tabs controller for StimulusJS.

- [stimulus-conductor](https://github.com/adrienpoly/stimulus-conductor) - An optionated StimulusJS Controller to easily manage parent/children controllers.

- [stimulus-remote](https://gitlab.com/initforthe/stimulus-remote) - Stimulus controller to provide content handling for HTML sent over the wire whilst using Rails UJS.

- [stimulus-sticky-table-header](https://github.com/johnbeatty/stimulus-sticky-table-header) - Sticky Table Header Controller Using StimulusJS.

- [stimulus-getaddress-io](https://gitlab.com/initforthe/stimulus-getaddress-io) - Getaddress.io controller for StimulusJS.

- [stimulus-toggle-util](https://github.com/damonbauer/stimulus-toggle-util) - A simple toggle utility controller to hide/show elements on click.

- [stimulus-timeago](https://github.com/stimulus-components/stimulus-timeago) - A Stimulus controller that returns the distance between the given date and now in words.

- [stimulus-popover](https://github.com/stimulus-components/stimulus-popover) - A Stimulus controller to deal with HTML popover. 

- [stimulus-sortable](https://github.com/stimulus-components/stimulus-sortable) - A Stimulus controller to reorder lists with drag-and-drop. 

- [stimulus-reveal-controller](https://github.com/stimulus-components/stimulus-reveal-controller) - A Stimulus controller to toggle a class on one or multiple items to show or hide them.

- [stimulus-content-loader](https://github.com/stimulus-components/stimulus-content-loader) - A Stimulus controller to asynchronously load HTML from an url. 

- [stimulus-checkbox-select-all](https://github.com/stimulus-components/stimulus-checkbox-select-all) - A Stimulus controller for managing checkbox lists.

- [stimulus-rails-nested-form](https://github.com/stimulus-components/stimulus-rails-nested-form) - A Stimulus controller to create new fields on the fly to populate your Rails relationship.

- [stimulus-textarea-autogrow](https://github.com/stimulus-components/stimulus-textarea-autogrow) - A Stimulus controller for autogrowing textarea.

- [stimulus-remote-rails](https://github.com/stimulus-components/stimulus-remote-rails) - A Stimulus controller to handle Rails UJS events.

- [stimulus-character-counter](https://github.com/stimulus-components/stimulus-character-counter) - A Stimulus controller that counts the number of characters in any input fields.

- [stimulus-animated-number](https://github.com/stimulus-components/stimulus-animated-number) - A Stimulus controller that animates a numerical value by counting to it.

- [stimulus-lightbox](https://github.com/stimulus-components/stimulus-lightbox) - A Stimulus controller to add a lightbox on images.

- [stimulus-scroll-progress](https://github.com/stimulus-components/stimulus-scroll-progress) - A Stimulus controller to add a progress bar when scrolling. 

- [stimulus-carousel](https://github.com/stimulus-components/stimulus-carousel) - A Stimulus controller to deal with carousel.

- [stimulus-rails-autosave](https://github.com/stimulus-components/stimulus-rails-autosave) - A Stimulus controller to autosubmit Rails forms. 

- [stimulus-transition](https://github.com/robbevp/stimulus-transition) - A stimulus controller to automatically run enter/leave transitions inspired by Vue and Alpine syntax.

- [stimulus-library](https://github.com/Sub-Xaero/stimulus-library) - A set of useful pre-built and configurable StimulusJS controllers for various common scenarios.

- [stimulus-store](https://github.com/omarluq/stimulus-store) - Lightweight state management for StimulusJS application.



## Reading

- _onrails.blog:_ [ StimulusJS Tutorials](https://onrails.blog/stimulus-js-tutorials/) - One man journey to StimulusJS written down in form of tutorials (with demos and code). My favorite:

  - [Building a Progressive Web App with Rails and Stimulus](https://onrails.blog/2019/05/06/hnpwa-with-rails-and-stimulus-introduction/)

  - [Stimulus + ActionCable + ActiveJob: Loading Asynchronous API Data](https://onrails.blog/2019/02/19/stimulus-actioncable-activejob-loading-asynchronous-api-data/)

- _thecrapthatcomesoutofmyhead.com:_ [Building beautiful, fast apps with Rails and StimulusJS](https://www.thecrapthatcomesoutofmyhead.com/2020/06/24/building-beautiful-fast-apps-with-rails-and-stimulusjs)

- _jorgemanrubia.com:_ [Form validations with HTML5 and modern Rails](https://www.jorgemanrubia.com/2019/02/16/form-validations-with-html5-and-modern-rails/)

- _chrislabarge.com:_ __Using Node Modules with Rails + Webpacker and StimulusJS__

    - [Pickr - Color Picker Library](https://chrislabarge.com/posts/color-picker)

    - [Tippy.js - Popup/Popover Library](https://chrislabarge.com/posts/stimulus-popup)

- _shime.sh:_ [Testing StimulusJS](https://shime.sh/testing-stimulus) - Testing was never covered in official documentation, this is an interesting alternative approach.

- _dev.to:_ [Modern Rails flash messages](https://dev.to/citronak/modern-rails-flash-messages-part-1-viewcomponent-stimulus-tailwind-css-3alm) - Modern day flash messages with undo functionality - based on rails and stimulus.

- _honeybadger.io:_ [How We Migrated To Turbolinks Without Breaking JavaScript](https://www.honeybadger.io/blog/turbolinks/)

- _mccollester.com_ __Using StimulusJS for Type-ahead Search__

  - [part 1](http://mccollester.com/2019/02/11/using-stimulusjs-type-ahead-search/)

  - [part 2](http://mccollester.com/2019/02/13/using-stimulusjs-for-type-ahead-search-2-2/)

- _cloudsh.com:_ [StimulusJS and Shopify API; Making a Cart](https://cloudsh.com/eleventy/posts/2019/stimulusjs_and_shopify_api.html)

- _gorails.com:_ __guides, screencasts, and tutorials__ - Premium content, covers everything one needs to know about StimulusJS in an easily digestible video format (with code, demos and text as well).

  - [Stimulus JS Framework Introduction](https://gorails.com/episodes/stimulus-js-framework-introduction?autoplay=1)

  - [Stimulus JS Twitter UI: Part 1](https://gorails.com/episodes/stimulus-js-twitter-ui-part-1)

  - [Stimulus JS Twitter UI: Part 2](https://gorails.com/episodes/stimulus-js-twitter-ui-part-2)

  - [Dynamic Nested Forms with Stimulus JS](https://gorails.com/episodes/dynamic-nested-forms-with-stimulus-js)

  - [Drag and Drop sortable lists with Rails & Stimulus JS](https://gorails.com/episodes/rails-drag-and-drop-sortable)

  - [Google Maps and Google Places Autocomplete API with Rails, Turbolinks, and Stimulus.js](https://gorails.com/episodes/google-maps-places-autocomplete-with-rails)

  - [Introduction to Stimulus Reflex](https://gorails.com/episodes/stimulus-reflex-basics)

- _boringrails.com:_ [Writing better Stimulus controllers](https://boringrails.com/articles/better-stimulus-controllers/) - Excellent article that shows the common failure paths when working with Stimulus and how you can improve your controllers by keeping them small, generic, and composable.

- _minthesize.com:_ [Infinite Horizontal Slider with CableReady and the Intersection Observer API](https://blog.minthesize.com/horizontal-slider-intersection-observer-cable-ready)

- _github.com:_ [Guide to Reactive Rails](https://github.com/obie/guide-to-reactive-rails) - helpful content for a Reactive Rails journey (with stimulusjs involved)



## Podcasts

- _The Changelog:_ [JavaScript sprinkles in Basecamp turned Stimulus](https://changelog.com/podcast/286) - David Heinemeier Hansson joined the show to share the story of how JavaScript sprinkles in Basecamp evolved into a full-fledged framework called StimulusJS.

- _Full Stack Radio:_ [DHH - Stimulus in Practice + On Writing Software Well](http://www.fullstackradio.com/83) - In this episode, Adam talks to David Heinemeier Hansson about Basecamp's new JavaScript framework "StimulusJS" as well as David's new YouTube series "On Writing Software Well".

- _Ruby Rogues:_ [Stimulus](https://www.youtube.com/watch?v=5ACErJC9ixs&list=PLJesql-aSfX7ZlZvJ7KZnyluVOVTSNHW1&index=20&t=0s) - The panelists talk about different use cases for StimulusJS, how it works, and how it can help your project.

- _Code with Jason:_ [Stimulus and Webpacker with Noel Rappin](https://www.codewithjason.com/podcast/9478314-002-stimulus-and-webpacker-with-noel-rappin/) - Noel Rappin talks about Webpack, Webpacker, and StimulusJS.



## Other Modest Code

- [ModestJS E-Book](https://modestjs.works/) - A short ebook for those who want to write modest JavaScript.

- [Black Candy](https://github.com/aidewoode/black_candy) - A self hosted music streaming server. Biggest open source rails app done with StimulusJS.

- [Trimmings](https://github.com/postlight/trimmings) - Set of patterns that allow you to add DOM manipulation by adding data-trimmings-* attributes.

- [Turbolinks](https://github.com/turbolinks/turbolinks) - Turbolinks makes navigating your web application faster and pairs perfectly with StimulusJS.

- [jquery-events-to-dom-events](https://github.com/leastbad/jquery-events-to-dom-events) - Pick up legacy jQuery "events" using DOM event listeners.



## Community

- [Stimulus forums](https://discourse.stimulusjs.org/) - Official community forums. Biggest wealth of information is scattered across those, but activity is slow.

- [Stimulus Reflex discord](https://discord.gg/XveN625) - Focused on Stimulus Reflex, but a lot of discussion about stimulus and a lot of knowledgable people on matter. Very active, questions get answered in minutes.

- [Better Stimulus](https://www.betterstimulus.com/) - An opinionated collection of StimulusJS best practices from community.