Hotwire Cookbook: Common Uses, Essential Patterns & Best Practices
summary
Practical Hotwire recipes show concrete patterns: use Turbo Frames for lazy-loading individual records and inline editing per-attribute frames (demo loads employee details on scroll and edits single fields in-place), use Turbo Streams for create/update/remove and infinite pagination (controller renders format.turbo_stream to prepend/replace/remove items), use Turbo Stream broadcasts (Action Cable) for live chat and visitor counts across two browser tabs, and combine drag‑and‑drop Kanban with SortableJS + RequestJS to persist order in the DB — all examples work in the live demos.
AI-written summary · about
chapters (15)
- 0:00Introduction and background
- 3:22What is Turbo Drive
- 7:17Turbo Frames basics
- 10:06Searching and filtering
- 13:41In-line editing and models
- 15:50Advanced Turbo Frames
- 17:17Turbo Streams fundamentals
- 20:50Turbo Streams broadcast
- 24:03Stimulus for JavaScript
- 25:07Drag-and-drop with Stimulus
- 26:33Stimulus for data tables
- 27:15Importing external libraries
- 28:23Auto-hiding flash messages
- 29:07Debouncing search input
- 30:33Conclusion and resources
related talks
34mHotwire Demystified
32mRevisiting the Hotwire Landscape after Turbo 8
29mRevisiting the Hotwire Landscape after Turbo 8
45mTurbo-Powered Web Apps - Modern Web Applications with Plain HTML
32mRevisiting the Hotwire Landscape after Turbo 8
44mRealtime Apps with Hotwire & ActionMailbox
50mLiveWire Hands-on
45mHTML over the Wire