Mateo Silva
October 2025
18 minute read

The modern web is moving faster than ever, and Ruby on Rails remains one of the most productive frameworks for building full-stack applications. With tools like Hotwire, Turbo, and Stimulus, Rails developers can achieve real-time interactivity and responsiveness without relying heavily on JavaScript frameworks.
This guide walks you through building a Ruby on Rails Full-Stack app using Hotwire—a framework made by Basecamp to speed up development by reducing JavaScript overhead. You’ll learn to use Turbo Drive for fast navigation, Turbo Frames for partial updates, and StimulusJS for lightweight interactivity.
Hotwire (HTML Over The Wire) is an innovative approach that lets you build interactive apps without writing heavy frontend code. Instead of sending JSON and rendering via JavaScript frameworks, Hotwire sends HTML fragments directly from the server.
Reduce frontend complexity and bundle size.
Faster page loads with Turbo Drive.
Automatic partial updates using Turbo Frames.
Real-time UI updates via Turbo Streams.
Minimal JavaScript reliance with Stimulus controllers.
Let’s start by creating a new Rails 7 project preconfigured with Hotwire components. Rails 7 natively integrates Turbo and Stimulus, making the setup straightforward.
Once the setup completes, navigate to your project folder and install Hotwire packages with the following command:
This command adds Turbo and StimulusJS automatically to your Rails configuration without additional NPM or Yarn steps. You can confirm its integration inside your app/javascript/controllers directory.
Turbo Drive replaces full-page reloads with partial updates using AJAX under the hood. It intercepts links and form submissions, making navigation almost instant while keeping the native browser feel.
By wrapping sections of your page with Turbo Frames, Rails can update only that section rather than reloading the whole DOM. This drastically improves perceived speed and user engagement.
Turbo Streams enable real-time DOM changes delivered from the server via ActionCable or standard HTTP responses. You can append, update, remove, or replace elements dynamically.
Combining Turbo Streams with background jobs or WebSockets creates powerful live-updating interfaces, perfect for chat apps, dashboards, or activity feeds.
StimulusJS complements Turbo by handling client-side logic using small, modular controllers. Stimulus keeps behavior close to HTML by connecting JavaScript classes to elements via data-controller attributes.
Each Stimulus controller can respond to DOM events like clicks, changes, or keypresses. This approach keeps interactivity declarative, lightweight, and easy to maintain.
Together, Turbo and Stimulus form the Hotwire stack, enabling developers to build real-time, single-page-like interactions while maintaining Rails’ simplicity.
Use Turbo Frames for partial updates.
Trigger Turbo Streams for live UI updates.
Enhance small UI components with Stimulus controllers.
With this setup, a page can handle dynamic comment updates, live notifications, or inline editing—all without a full-page reload.
Structure Stimulus controllers logically (one per component).
Leverage Turbo Streams instead of custom WebSocket logic.
Use Turbo Frames to scope updates properly and avoid conflicts.
Cache Turbo responses via Rails fragment caching.
Test interactions with Capybara and system tests to verify seamless UI behavior.
Turbo Frames nesting can cause unexpected reloads—use unique IDs.
Avoid mixing React/Vue components inside Hotwire views without clear boundaries.
Always ensure ActionCable is running for live Turbo Streams.
When Turbo frame updates fail, inspect network responses for missing HTML templates.
By embracing Hotwire, Turbo, and Stimulus, modern Rails developers can build applications that feel instantaneous and interactive while remaining server-driven. This architecture drastically reduces frontend complexity and empowers teams to iterate faster without managing heavy JavaScript frameworks.
As Rails continues evolving, mastering the Hotwire full-stack approach ensures you stay ahead—writing cleaner, more maintainable code that delivers seamless user experiences.
Hotwire lets developers build modern, fast UIs by sending HTML from the server instead of relying on heavy frontend frameworks.
Turbo Frames encapsulate parts of the page that can be updated independently, while AJAX requires manual DOM manipulation and event handling.
Yes, but it's best to keep Hotwire views separate from JavaScript-driven components to avoid rendering conflicts.
No, Stimulus is a lightweight complement that enhances HTML with simple, declarative JavaScript behavior—it’s not a full component framework.
Hotwire is officially integrated with Rails 7, but can be manually added to Rails 6 projects with minor configuration.