Modern web development is slowly moving away from complexity. After years of heavy JavaScript frameworks, developers are rediscovering the power of simplicity—using plain HTML, standard HTTP, and REST principles to build fast, responsive applications.
Hotwire fits perfectly into this shift. It lets you build single-page–like experiences without turning your frontend into a JavaScript-heavy maze. Instead of shipping JSON back and forth and rebuilding interfaces in the browser, Hotwire sends HTML directly from the server—ready to render.
Popularized by the Ruby on Rails ecosystem but usable with any backend, Hotwire has earned massive adoption, with tens of thousands of GitHub stars and hundreds of thousands of weekly downloads.
What Is Hotwire?
Hotwire is a set of tools designed to create reactive, modern web applications using HTML as the primary communication layer between the server and the browser.
It shares the same philosophy as HTMX:
Write less JavaScript
Use HTML for state and UI
Embrace REST and HATEOAS
The core idea is simple but powerful:
If the server already knows how to render HTML, why send JSON and rebuild the UI on the client?
Hotwire avoids that extra work by letting the server send HTML fragments that update parts of the page directly.
The Three Parts of Hotwire
Hotwire consists of three libraries, but most developers focus on the first two:
Turbo – Handles page navigation and partial updates
Stimulus – Adds lightweight JavaScript behavior
Native – Builds mobile apps using the same Hotwire concepts
In this article, we’ll focus on Turbo and Stimulus.
Turbo: Making HTML Feel Like a SPA
Turbo Drive: Faster Navigation Without Reloads
By default, browsers completely reload pages when you click a link or submit a form. Turbo Drive changes this behavior.
Instead of reloading everything, Turbo:
Fetches the new page
Diffs it against the current one
Updates only what changed
The result feels like a single-page application—without writing JavaScript.
All it takes is adding one script:
<script type=”module” src=”https://cdn.jsdelivr.net/npm/@hotwired/turbo@latest/dist/turbo.es2017-esm.min.js”></script>
Back, forward, and refresh still work exactly as users expect.
Turbo Frames: Update Only What Matters
Turbo Frames let you divide a page into independent sections using <turbo-frame> elements. Each frame can be updated without touching the rest of the page.
For example, a navigation bar can reload the whole page, while a content area or form updates in place.
When a user clicks a link or submits a form inside a frame:
The server returns HTML for that frame
Turbo swaps it in automatically
This keeps interfaces fast, clean, and intuitive—without JSON or frontend state management.
Turbo Streams: Multiple Updates at Once
Sometimes one action affects several parts of the page—like adding a comment, updating a counter, and resetting a form.
Turbo Streams handle this by sending multiple instructions in one response. Each instruction tells the browser:
What to do (append, update, replace)
Where to do it
Streams work especially well with:
Live updates
WebSockets
Server-sent events
They’re powerful, but best used only when frames aren’t enough.
Reusing Server Templates
One of Hotwire’s biggest strengths is reusability.
The same server-side templates used to render the initial page can also generate updates for frames or streams. Whether you use Rails, Django, Spring, or Node templates, Hotwire fits right in.
This keeps your codebase:
Cleaner
Easier to maintain
Free from duplicated frontend logic
Real-Time Updates from the Server
Hotwire also supports real-time UI updates using <turbo-stream-source>. This connects the browser to live server events via WebSockets or Server-Sent Events.
Whenever the server pushes an update, the UI changes automatically—no polling or JavaScript frameworks required.
Stimulus: Small JavaScript, Big Impact
While Turbo handles most interactions, sometimes you need client-side behavior like:
Copy buttons
Toggles
Animations
Form enhancements
Stimulus fills this role.
Instead of large JavaScript files, Stimulus uses:
Small controllers
HTML data attributes
Clear, isolated logic
Each controller handles a specific behavior, keeping JavaScript simple and maintainable.
The result is clean, readable markup with just enough interactivity—no complex state management needed.
Why Developers Love Hotwire
Hotwire shines because it:
Reduces JavaScript fatigue
Keeps logic on the server
Improves performance
Simplifies maintenance
Works with any backend
It may not replace React or Next.js for every use case, but for most applications, it delivers 80% of the benefits with 20% of the effort.
Final Thoughts
Hotwire brings web development back to its roots—HTML, HTTP, and simplicity—without sacrificing modern user experience.
If you want fast, responsive applications without frontend complexity, Hotwire is a powerful, elegant alternative worth exploring.
