Awesome

<p align="center"> <img src="https://github.com/stimulusreflex/stimulus_reflex/blob/main/assets/stimulus-reflex-logo-with-copy.png?raw=1" width="360" /> <h1 align="center">Welcome to StimulusReflex 👋</h1> <p align="center"> <img src="https://img.shields.io/gem/v/stimulus_reflex.svg?color=red" /> <img src="https://img.shields.io/npm/v/stimulus_reflex.svg?color=blue" /> <a href="https://www.npmjs.com/package/stimulus_reflex"> <img alt="downloads" src="https://img.shields.io/npm/dm/stimulus_reflex.svg?color=blue" target="_blank" /> </a> <a href="https://github.com/stimulusreflex/stimulus_reflex/blob/main/LICENSE.txt"> <img alt="License: MIT" src="https://img.shields.io/badge/license-MIT-brightgreen.svg" target="_blank" /> </a> <a href="https://docs.stimulusreflex.com/" target="_blank"> <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" /> </a> <br /> <a href="#badge"> <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg"> </a> <a href="https://github.com/testdouble/standard" target="_blank"> <img alt="Ruby Code Style" src="https://img.shields.io/badge/Ruby_Code_Style-standard-brightgreen.svg" /> </a> <a href="https://github.com/sheerun/prettier-standard" target="_blank"> <img alt="JavaScript Code Style" src="https://img.shields.io/badge/JavaScript_Code_Style-prettier_standard-ff69b4.svg" /> </a> <br /> <a target="_blank" rel="noopener noreferrer" href="https://github.com/stimulusreflex/stimulus_reflex/actions/workflows/prettier-standard.yml"> <img src="https://github.com/stimulusreflex/stimulus_reflex/workflows/Prettier-Standard/badge.svg" alt="Prettier-Standard" style="max-width:100%;"> </a> <a target="_blank" rel="noopener noreferrer" href="https://github.com/stimulusreflex/stimulus_reflex/actions/workflows/standardrb.yml"> <img src="https://github.com/stimulusreflex/stimulus_reflex/workflows/StandardRB/badge.svg" alt="StandardRB" style="max-width:100%;"> </a> <a target="_blank" rel="noopener noreferrer" href="https://github.com/stimulusreflex/stimulus_reflex/actions/workflows/tests.yml"> <img src="https://github.com/stimulusreflex/stimulus_reflex/workflows/Tests/badge.svg" alt="Tests"> </a> </p> </p> <br />

🎉 An exciting new way to build modern, reactive, real-time apps with Ruby on Rails.

StimulusReflex eliminates the complexity imposed by full-stack frontend frameworks. And, it's fast.

It works seamlessly with the Rails tooling you already know and love.

Server-rendered HTML, delivered in milliseconds over the wire via Websockets
ERB templates and partials, with first-class ViewComponent support
Russian doll caching and ActiveJob
StimulusJS and Turbolinks/Turbo Drive
Built with CableReady, our secret power-move

Our goal is to help small teams do big things with familiar tools.

This project strives to live up to the vision outlined in The Rails Doctrine.

📚 Docs

✨ Demos

Build a Twitter Clone in 10 Minutes (video)
BeastMode - faceted search, with filtering, sorting and pagination
StimulusReflex Patterns - single-file SR apps hosted on Glitch
Boxdrop - a Dropbox-inspired concept demo

👩‍👩‍👧 Discord Community

Please join over 2000 of us on Discord for support getting started, as well as active discussions around Rails, Hotwire, Stimulus, Phlex and CableReady.

Stop by #newcomers and introduce yourselves!

💙 Support

Your best bet is to ask for help on Discord before filing an issue on GitHub. We are happy to help, and we ask people who need help to come with all relevant code to look at. A git repo is preferred, but Gists are fine, too. If you need a template for reproducing your issue, try this.

Please note that we are not actively providing support on Stack Overflow. If you post there, we likely won't see it.

🚀 Installation and upgrading

CLI and manual setup procedures are fully detailed in the official docs.

Rubygem

bundle add stimulus_reflex

JavaScript

There are a few ways to install the StimulusReflex JavaScript client, depending on your application setup.

ESBuild / Webpacker

yarn add stimulus_reflex

Importmaps

# config/importmap.rb

# ...

pin 'stimulus_reflex', to: 'stimulus_reflex.js', preload: true

Rails Asset pipeline (Sprockets):

<!-- app/views/layouts/application.html.erb -->

<%= javascript_include_tag "stimulus_reflex.umd.js", "data-turbo-track": "reload" %>

🙏 Contributing

Code of Conduct

Everyone interacting with the StimulusReflex project’s codebases, issue trackers, chat rooms and forum is expected to follow the Code of Conduct.

Coding Standards

This project uses Standard for Ruby code and Prettier-Standard for JavaScript code to minimize bike shedding related to source formatting.

Please run ./bin/standardize prior to submitting pull requests.

View the wiki to see recommendations for configuring your editor to work best with the project.

📦 Releasing

Always publish CableReady first!
Update the cable_ready dependency version in stimulus_reflex.gemspec and package.json
Make sure that you run yarn and bundle to pick up the latest.
Bump version number at lib/stimulus_reflex/version.rb. Pre-release versions use .preN
Run bundle exec rake build and yarn build
Run bin/standardize
Commit and push changes to GitHub
Run bundle exec rake release
Run yarn publish --no-git-tag-version
Yarn will prompt you for the new version. Pre-release versions use -preN
Commit and push changes to GitHub
Create a new release on GitHub (here) and generate the changelog for the stable release for it

📝 License

StimulusReflex is released under the MIT License.

Originally inspired by Phoenix LiveView. 🙌