# Hotwire

Published articles for Hotwire.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## The joy of Inertia Rails: painting your own with 50 happy little lines

DevFeed: [The joy of Inertia Rails: painting your own with 50 happy little lines](<https://devfeed.tech/articles/the-joy-of-inertia-rails-painting-your-own-with-50-happy-little-lines-19791.md>)

Original publisher: [Read original article](<https://evilmartians.com/chronicles/the-joy-of-inertia-rails-painting-your-own-with-50-happy-little-lines>)

Author: Travis Turner (richardturner@evilmartians.com)

Published: 2026-07-14T00:00:00Z

Content type: tutorial

Language: en

Sources: [Evil Martians](<https://devfeed.tech/sources/evil-martians.md>)

Topics: [Rails](<https://devfeed.tech/topics/rails.md>), [Single-page application (SPA)](<https://devfeed.tech/topics/spa.md>), [React](<https://devfeed.tech/topics/react.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [hotwire](<https://devfeed.tech/tags/hotwire.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [rails](<https://devfeed.tech/tags/rails.md>), [react](<https://devfeed.tech/tags/react.md>), [turbo](<https://devfeed.tech/tags/turbo.md>)

### AI overview

This tutorial rebuilds the Inertia Rails protocol on a real Rails app using a 50-line React client and a 16-line Rails renderer. It explains how rendering JSON instead of HTML on later visits connects server-owned navigation with a frontend component model, and audits what the official gem adds.

### Source excerpt

Inertia is Turbolinks with one twist: render JSON instead of HTML on the second visit. We rebuild the whole protocol on a real Rails app with a 50-line client and a 16-line server, then audit what the real gem adds on top.

## Building a (Very) Simple Responsive Search with Rails & Stimulus

DevFeed: [Building a (Very) Simple Responsive Search with Rails & Stimulus](<https://devfeed.tech/articles/building-a-very-simple-responsive-search-with-rails-stimulus-20113.md>)

Original publisher: [Read original article](<https://hashrocket.com/blog/posts/building-a-simple-search-with-rails-stimulus>)

Author: Jack Rosa

Published: 2025-12-09T14:00:00Z

Content type: tutorial

Language: en

Sources: [Hashrocket](<https://devfeed.tech/sources/hashrocket.md>)

Topics: [Rails](<https://devfeed.tech/topics/rails.md>), [Stimulus](<https://devfeed.tech/topics/stimulus.md>), [Framework](<https://devfeed.tech/topics/framework.md>)

Tags: [building](<https://devfeed.tech/tags/building.md>), [hotwire](<https://devfeed.tech/tags/hotwire.md>), [rails](<https://devfeed.tech/tags/rails.md>), [search](<https://devfeed.tech/tags/search.md>), [side-project](<https://devfeed.tech/tags/side-project.md>), [stimulus](<https://devfeed.tech/tags/stimulus.md>), [turbo](<https://devfeed.tech/tags/turbo.md>)

### AI overview

A tutorial for building a responsive search form with Rails and Stimulus. It demonstrates debounced input submission, a clear-input button, and updating search results inside a Turbo Frame without a full-page reload.

### Source excerpt

Here's a simple and responsive search form I put together for a recent side project, using Hotwire's Stimulus framework and Rails with Turbo. The Form Here's how the search input looks. It's a simple search form connected to a Stimulus controller. The input triggers the search function upon every input event. The debounce logic occurs in the Stimulus controller to make sure not too many requests are made to the server: <%= form_with url: items_path, method: :get, data: { controller: "search", turbo_frame: "items_list" } do |f| %> <%= f.text_field :query, placeholder: "Search...", data: { search_target: "input", action: "input->search#search" } %> <button type="button" class="hidden" data-search-target="clearButton" data-action="click->search#clear"> x </button> <% end %> There's an additional feature here: a button which appears in the search field whenever the field has a value. The button has a data-action attribute pointing to the clear action. If the button is clicked, the input value is cleared out. The Stimulus Controller All we need to do here is submit the form with a debounce timer, handle the action for clicking the clear input button, and handle hiding the clear button if the input field has a value or not. export default class extends Controller { static targets = ["input", "clearButton"] connect() { this.toggleClear() } search() { this.toggleClear() clearTimeout(this.timeout) this.timeout = setTimeout(() => { this.element.requestSubmit() }, 300) } clear() { this.inputTarget.value = "" this.toggleClear() this.element.requestSubmit() } toggleClear() { if (this.inputTarget.value.length > 0) { this.clearButtonTarget.classList.remove("hidden") } else { this.clearButtonTarget.classList.add("hidden") } } } The Turbo Frame You'll notice the form targets an items_list turbo frame, which contains your search results in the view. When the Stimulus controller submits the form, the content inside this frame gets replaced with the new search results. This is a pretty

## A refreshing take: using serverside rendering to reduce fragile DOM state

DevFeed: [A refreshing take: using serverside rendering to reduce fragile DOM state](<https://devfeed.tech/articles/a-refreshing-take-using-serverside-rendering-to-reduce-fragile-dom-state-29998.md>)

Original publisher: [Read original article](<https://engineering.freeagent.com/2025/10/17/a-refreshing-take-using-serverside-rendering-to-reduce-fragile-dom-state/>)

Author: Simon Fish

Published: 2025-10-17T08:33:59Z

Content type: article

Language: en

Sources: [FreeAgent](<https://devfeed.tech/sources/freeagent.md>)

Topics: [Hotwire](<https://devfeed.tech/topics/hotwire.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [Rails](<https://devfeed.tech/topics/rails.md>), [Stimulus](<https://devfeed.tech/topics/stimulus.md>), [WebSocket](<https://devfeed.tech/topics/websocket.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [tbox](<https://devfeed.tech/topics/tbox.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [development](<https://devfeed.tech/tags/development.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [hotwire](<https://devfeed.tech/tags/hotwire.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>), [js](<https://devfeed.tech/tags/js.md>), [rails](<https://devfeed.tech/tags/rails.md>), [ruby-on-rails](<https://devfeed.tech/tags/ruby-on-rails.md>), [stimulus](<https://devfeed.tech/tags/stimulus.md>), [streams](<https://devfeed.tech/tags/streams.md>), [websocket](<https://devfeed.tech/tags/websocket.md>)

### AI overview

This article examines FreeAgent's use of server-side rendering with Hotwire, Turbo, Stimulus, and Rails to reduce fragile DOM state. It explains how Turbo Streams and Action Cable can update browser pages asynchronously, contrasting these behaviors with the original DOM-manipulation actions.

### Source excerpt

Hotwire is central to how we drive the frontend at FreeAgent, and Action Cable allows us to send Turbo Streams as users browse the site, adding a layer of richness to the user experience.

## Announcing Hotwire Native 1.2

DevFeed: [Announcing Hotwire Native 1.2](<https://devfeed.tech/articles/announcing-hotwire-native-1-2-33497.md>)

Original publisher: [Read original article](<https://dev.37signals.com/announcing-hotwire-native-v1-2/>)

Author: Jay Ohms

Published: 2025-04-23T17:00:00Z

Content type: release

Language: en

Sources: [37signals Dev](<https://devfeed.tech/sources/37signals-dev.md>)

Topics: [Hotwire](<https://devfeed.tech/topics/hotwire.md>), [Android](<https://devfeed.tech/topics/android.md>), [iOS](<https://devfeed.tech/topics/ios.md>), [Ruby on Rails](<https://devfeed.tech/topics/ruby-on-rails.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [api](<https://devfeed.tech/tags/api.md>), [bug-fixes](<https://devfeed.tech/tags/bug-fixes.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [hotwire](<https://devfeed.tech/tags/hotwire.md>), [ios](<https://devfeed.tech/tags/ios.md>), [rails](<https://devfeed.tech/tags/rails.md>), [ruby-on-rails](<https://devfeed.tech/tags/ruby-on-rails.md>), [update](<https://devfeed.tech/tags/update.md>)

### AI overview

Hotwire Native 1.2 is a major update for iOS and Android that adds route decision handlers, built-in handling for server-driven historical location URLs, official bottom-tab navigation support, and new demo apps.

### Source excerpt

A big update to Hotwire Native for iOS and Android.

## Announcing Hotwire Spark: live reloading for Rails applications

DevFeed: [Announcing Hotwire Spark: live reloading for Rails applications](<https://devfeed.tech/articles/announcing-hotwire-spark-live-reloading-for-rails-applications-33499.md>)

Original publisher: [Read original article](<https://dev.37signals.com/announcing-hotwire-spark-live-reloading-for-rails/>)

Author: Jorge Manrubia

Published: 2024-12-18T18:00:00Z

Content type: release

Language: en

Sources: [37signals Dev](<https://devfeed.tech/sources/37signals-dev.md>)

Topics: [Hotwire](<https://devfeed.tech/topics/hotwire.md>), [Rails](<https://devfeed.tech/topics/rails.md>), [Stimulus](<https://devfeed.tech/topics/stimulus.md>), [Front end](<https://devfeed.tech/topics/frontend.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [hotwire](<https://devfeed.tech/tags/hotwire.md>), [html](<https://devfeed.tech/tags/html.md>), [rails](<https://devfeed.tech/tags/rails.md>), [stimulus](<https://devfeed.tech/tags/stimulus.md>)

### AI overview

37signals announces Hotwire Spark, a live-reloading system for Rails applications. It automatically updates the current page when HTML, CSS, or Stimulus controller source changes, using smooth page morphing, stylesheet reloads, and controller replacement without bundling or frontend build tooling.

### Source excerpt

Improve your feedback loop with smooth automatic page updates.

## A vanilla Rails stack is plenty

DevFeed: [A vanilla Rails stack is plenty](<https://devfeed.tech/articles/a-vanilla-rails-stack-is-plenty-33494.md>)

Original publisher: [Read original article](<https://dev.37signals.com/a-vanilla-rails-stack-is-plenty/>)

Author: Jorge Manrubia

Published: 2024-12-12T18:00:00Z

Content type: opinion

Language: en

Sources: [37signals Dev](<https://devfeed.tech/sources/37signals-dev.md>)

Topics: [Rails](<https://devfeed.tech/topics/rails.md>), [Hotwire](<https://devfeed.tech/topics/hotwire.md>), [PWA](<https://devfeed.tech/topics/pwa.md>), [Ruby](<https://devfeed.tech/topics/ruby.md>), [Stimulus](<https://devfeed.tech/topics/stimulus.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [frameworks](<https://devfeed.tech/tags/frameworks.md>), [hotwire](<https://devfeed.tech/tags/hotwire.md>), [pwa](<https://devfeed.tech/tags/pwa.md>), [rails](<https://devfeed.tech/tags/rails.md>), [ruby](<https://devfeed.tech/tags/ruby.md>), [stimulus](<https://devfeed.tech/tags/stimulus.md>), [test](<https://devfeed.tech/tags/test.md>)

### AI overview

The article recommends a vanilla Rails 8 stack with minimal Ruby and JavaScript dependencies, server-rendered views, Hotwire, import maps, standard CSS, relational-database-backed services, Minitest, PWAs, and Kamal deployment. It presents this approach as 37signals' balance of productivity, user experience, and long-term maintainability.

### Source excerpt

Minimal dependencies, maximum productivity. Staying vanilla pays long term dividends for your Rails apps.

## Announcing Hotwire Native

DevFeed: [Announcing Hotwire Native](<https://devfeed.tech/articles/announcing-hotwire-native-33498.md>)

Original publisher: [Read original article](<https://dev.37signals.com/announcing-hotwire-native/>)

Author: Jay Ohms

Published: 2024-09-25T17:00:00Z

Content type: release

Language: en

Sources: [37signals Dev](<https://devfeed.tech/sources/37signals-dev.md>)

Topics: [Hotwire](<https://devfeed.tech/topics/hotwire.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>), [Android](<https://devfeed.tech/topics/android.md>), [Framework](<https://devfeed.tech/topics/framework.md>), [iOS](<https://devfeed.tech/topics/ios.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>)

Tags: [announcement](<https://devfeed.tech/tags/announcement.md>), [build](<https://devfeed.tech/tags/build.md>), [hotwire](<https://devfeed.tech/tags/hotwire.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [mobile-apps](<https://devfeed.tech/tags/mobile-apps.md>), [stimulus](<https://devfeed.tech/tags/stimulus.md>), [swift](<https://devfeed.tech/tags/swift.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

37signals announces Hotwire Native, a framework that consolidates Turbo Native and Strada for building hybrid mobile apps on iOS and Android. It supports a web-first approach that reuses existing Hotwire web apps while allowing selected screens or components to be implemented natively in Swift or Kotlin.

### Source excerpt

The web-first framework for building native mobile apps.