ReactiveComponent

Key Features

Declarative DSL

Define reactive behavior with subscribes_to, broadcasts, live_action, and client_state right inside your component class.

Automatic ERB-to-JS

Your existing ERB templates are compiled to JavaScript render functions at boot time via ruby2js. No separate client-side templates.

ActionCable Live Updates

When a model changes on the server, broadcasts flow through ActionCable and the client re-renders the component instantly.

Secure Server Actions

Trigger server-side logic from the client using live_action. Actions are verified with signed tokens.

Quick Example

class MessageRowComponent < ApplicationComponent
  include ReactiveComponent

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

  def initialize(message:, selected: false)
    @message = message
    @selected = selected
  end

  private

  def toggle_star
    @message.toggle_starred!
  end
end

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

Render it like any ViewComponent:

<%= render MessageRowComponent.new(message: @message) %>

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