Hotwire: HTML Over The Wire

Hotwire ("HTML Over The Wire") is a suite of techniques from Basecamp/37signals for building fast, interactive web apps with minimal custom JavaScript. Rather than a client fetching JSON and rendering it itself (typical SPA architecture), the server sends ready-to-render HTML directly.

The Three Pieces

• Turbo -- handles page navigation and targeted fragment updates without a full page reload.

• Stimulus -- a minimal JS framework for attaching small, focused behaviors to existing server-rendered HTML.

• Strada -- extends the same HTML-over-the-wire approach to native iOS/Android apps embedding web views.

Avoiding Duplicated Logic

A typical SPA often needs comparable formatting/validation logic on both the server (for the API) and the client (for immediate UI feedback). Hotwire's server-rendered HTML approach keeps that logic in one place -- the server.

Stimulus: Behavior for HTML You Already Have

// controllers/dropdown_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  toggle() {
    this.element.classList.toggle("open")
  }
}

// <div data-controller="dropdown">
//   <button data-action="click->dropdown#toggle">Menu</button>
// </div>
//
// Stimulus attaches behavior to EXISTING markup via data
// attributes -- it doesn't own or generate the DOM tree itself

The "Majestic Monolith" Fit

Hotwire fits the "majestic monolith" philosophy (also associated with Basecamp/DHH): a single, well-organized server-side codebase instead of splitting into separate frontend and backend services.