Getting StartedLink to heading

The following steps describe how to add LiveComponent to an existing Rails application.

Install gemLink to heading

First, install the live_component Ruby gem. Typically this is done by adding it to your Gemfile:
gem "live_component", "~> 1.0"

gem "live_component", "~> 1.0"
Once the gem is listed in your Gemfile, you can run bundle install to install it.Alternatively, you can add live_component to your bundle via bundle add:
bundle add live_component
bundle add live_component

Run the Rails GeneratorLink to heading

LiveComponent comes with a handy Rails generator that can bootstrap your application so you can start writing LiveComponents right away. The generator automates the remaining steps in this guide. You can choose to either run it or integrate LiveComponent manually by continuing on to the next step.
bin/rails generate live_component:install
bin/rails generate live_component:install

Install JavaScript packageLink to heading

Next, install the JavaScript package using your package manager of choice. Add it to your package.json file, eg:
"dependencies": {
  "@camertron/live-component": "^1.0.0"
}

"dependencies": {
  "@camertron/live-component": "^1.0.0"
}
Once the package is listed in your package.json, you can run npm install (or another similar command depending on your package manager) to install it.Alternatively, you can add live-component to your application via npm add or similar:
npm add @camertron/live-component --save

npm add @camertron/live-component --save

Insert middlewareLink to heading

One of the ways LiveComponent achieves good performance is by avoiding a significant amount of Rails overhead. It does so by inserting Rack middleware at the very beginning of the middleware stack.Add an initializer at config/initializers/live_component.rb that requires the LiveComponent gem and adds the middleware:
require "live_component"

Rails.application.config.middleware.insert_before(0, LiveComponent::Middleware)

require "live_component"

Rails.application.config.middleware.insert_before(0, LiveComponent::Middleware)

Add JavaScriptLink to heading

LiveComponent's JavaScript works best with a bundler like Vite or Webpack, and has not been tested with importmaps.On the client-side, LiveComponent is really just a fancy Stimulus controller. In your application's entrypoint, eg. app/javascript/entrypoint/application.ts, start Stimulus and then start LiveComponent:
// Import with aliases to distinguish the two Application classes
import { Application as LiveComponentApplication } from "@camertron/live-component";
import { Application as StimulusApplication } from "@hotwired/stimulus";

// Add some declarations on window to make the TypeScript compiler happy
declare global {
  interface Window {
    Stimulus: StimulusApplication;
    Live: LiveComponentApplication;
  }
}

// Start both the Stimulus and LiveComponent applications
window.Stimulus = StimulusApplication.start();
window.Live = LiveComponentApplication.start(window.Stimulus);

// Import with aliases to distinguish the two Application classes
import { Application as LiveComponentApplication } from "@camertron/live-component";
import { Application as StimulusApplication } from "@hotwired/stimulus";

// Add some declarations on window to make the TypeScript compiler happy
declare global {
  interface Window {
    Stimulus: StimulusApplication;
    Live: LiveComponentApplication;
  }
}

// Start both the Stimulus and LiveComponent applications
window.Stimulus = StimulusApplication.start();
window.Live = LiveComponentApplication.start(window.Stimulus);
LiveComponent should now be ready to use 🎉🎉🎉
Overview
Your First Component
© 2025 Cameron C. Dutro