Hotwire

Hotwire, which stands for HTML Over the Wire, provides a different way to build modern web applications without using too much JavaScript. This series of articles will teach you how to build awesome web applications using Hotwire.

12 Articles

Using Hotwire for Inline Form Updates Without Form Submission

Sometimes you need dynamic content on the form, where parts of the form update based on the user input. This post shows how to use Hotwire's Turbo and Stimulus libraries for in-place form updates by loading data from the server, without submitting the form, which happens only once, at the end.

Hotwire 6 min read

Practical Stimulus: Building a Counter Component

In this article, we will build a counter component using the Stimulus JavaScript library. This simple example will demonstrate a bunch of useful features of Stimulus such as managing state, handling events, and targeting DOM elements.

Practical Stimulus 4 min read

You Don't Need Rails to Start Using Hotwire

Although Hotwire is closely tied to Ruby on Rails, you might be surprised to know that you don't really need Rails to learn, play, and experiment with Hotwire. In this article, we'll build a simple static site that uses Turbo Drive + Frames to make it responsive and use Streams to make it dynamic.

Hotwire 21 min read

Practical Stimulus: How to Toggle CSS Classes

This second article in the 'Stimulus in Practice' series shows how you can work with HTML classes using Stimulus. Specifically, we'll learn how to toggle classes on an element. This is useful when you want to show or hide certain elements or update the design in response to user interaction.

Practical Stimulus 5 min read

Practical Stimulus: Capture User Input

Stimulus is a JavaScript library that works really well with the HTML-over-the-wire approach of building web applications. In this series of articles, we'll learn how to accomplish common front-end tasks using Stimulus. This post shows how to capture user input and display it on the screen.

Practical Stimulus 6 min read

Progressive Application Development with Hotwire

This is the day when you fall in love with Hotwire. We're going to build a simple counter. But we're not going to build it once and be done with it. Instead, we'll build and progressively enhance it with all three frameworks in Hotwire: Turbo Drive, Turbo Frames, and Turbo Streams.

Hotwire 21 min read

Turbo Streams: How They Work and Differ From Turbo Frames

No, you don’t need WebSockets to use Turbo Streams. You can simply use them to deliver multiple page updates with a single HTML response. This article teaches the basics of Turbo Streams to build a SPA without writing a single line of JavaScript. No Rails needed, either!

Hotwire 14 min read

A Brief Introduction to Hotwire

Hotwire, which stands for HTML Over the Wire, provides a different way to build modern web applications without using too much JavaScript. This article provides a quick introduction to Hotwire and its component frameworks, such as Turbo Drive, Frames, and Streams.

Hotwire 8 min read

Let's Learn Ruby on Rails + Hotwire by Building a To-Do List

In this article, we'll learn Ruby on Rails and Hotwire by building a to-do list from scratch. It shows how to build single-page web applications using traditional web architecture (server-rendered HTML), without the complexity of modern JavaScript frameworks like React.

Hotwire 25 min read