Reactive server-rendered components for Rails via ActionCable. Build ViewComponent components that automatically re-render on the client when data changes — no full page reloads needed.

ReactiveComponent compiles your ERB templates to JavaScript at boot time and uses ActionCable to push updates in real time.

Documentation | Quick Start | DSL Reference

class MessageRowComponent < ApplicationComponent
  include ReactiveComponent

  subscribes_to :message
  broadcasts stream: ->(message) { [message.recipient, :messages] }
  live_action :toggle_star
  client_state :selected, default: false

  def initialize(message:)
    @message = message
  end

  private

  def toggle_star
    @message.toggle_starred!
  end
end

<div class="message-row">
  <span><%= @message.sender.name %></span>
  <span><%= @message.subject %></span>
  <button data-action="click->reactive-renderer#action"
          data-reactive-action="toggle_star">
    <%= @message.starred? ? "Unstar" : "Star" %>
  </button>
</div>

When the message is updated anywhere in the system, the component re-renders on every connected client automatically.

Add to your Gemfile:

gem "reactive_component"
gem "ruby2js", github: "ruby2js/ruby2js"

Mount the engine in your routes:

# config/routes.rb
mount ReactiveComponent::Engine => "/reactive_component"

See the Installation guide for full setup instructions.

• Declarative DSL — subscribes_to, broadcasts, live_action, client_state
• Automatic ERB-to-JS compilation — no separate client templates to maintain
• ActionCable-powered live updates — instant re-renders when data changes
• Secure server actions — HMAC-signed tokens prevent tampering
• Client-side state — ephemeral UI state managed in the browser
• Multi-Rails support — tested against Rails 7.1, 7.2, and 8.0

ReactiveComponent compiles your ERB templates into JavaScript render functions at boot time using ruby2js. When a model changes:

1. after_commit callbacks (auto-wired by subscribes_to) trigger a broadcast.
2. The server evaluates only the dynamic expressions from your template and sends compact JSON data over ActionCable.
3. The client-side Stimulus controller runs the compiled JS template with the new data and updates the DOM.

No full page reload. No custom JavaScript. Your existing ERB templates are the single source of truth.

See the full architecture guide for details.

• Nested components -- Render reactive components inside other reactive components. Guide
• Collection loops -- Use .each in templates with automatic per-item data extraction. Guide
• Broadcast compression -- Gzip-compress ActionCable payloads for large components. Configuration
• Stream filtering -- Filter broadcasts by subscription params for scoped updates. Configuration

bin/setup
bundle exec rake test

Bug reports and pull requests are welcome on GitHub at https://github.com/lluzak/reactive_component.

The gem is available as open source under the terms of the MIT License.