Herb in Rails 8.2: Your ERB views, now HTML-aware @ Deccan Queen on Rails 2026, Pune, India

With teams, companies, and open source projects adopting Herb, it’s proving itself at scale and is on track to become an opt-in view engine in Rails 8.2.

This talk explores what Herb brings to Rails, from its ActionView integration to the tooling and developer experience it unlocks. Then I’ll introduce the first production-ready version of ReActionView, bringing Phoenix LiveView-like fine-grained reactivity to standard HTML+ERB templates. Optional, gradual, no JavaScript framework, no new file format.

Transcript

1. Marco Roth Herb in Rails 8.2: Your ERB views, now HTML-aware Oct 08, 2026 - Deccan Queen on Rails, Pune, India
2. 🌐 marcoroth.dev Marco Roth ! Full-Stack Developer & Open Source Contributor  @marcoroth  @marcoroth@ruby.social  @marcoroth_  @marcoroth.dev
4. Developer Tooling & Developer Experience
5. Herb
7. Marco Roth Herb in Rails 8.2: Your ERB views, now HTML-aware Oct 08, 2026 - Deccan Queen on Rails, Pune, India
8. What is Herb?
9. What is Herb? What ships in Rails 8.2?
10. What is Herb? What ships in Rails 8.2? What does this enable?
11. What is Herb?
12. A modern templating language for the HTML+ERB you already have.
13. One language and toolchain that understands your HTML and Ruby together.
14. Herb has full semantic and structural understanding of your HTML views.
15. Linter Formatter Language Server Engine Dev Tools Dev Server
19. herb dev
22. Herb helps you in development, in your editor, in CI, and when rendering your views.
23. What ships in Rails 8.2?
24. Action View
25. Herb? Action View
26. index.html.erb
27. index.html.erb action
28. index.html.erb action format
29. index.html.erb action format handler
30. Herb is the new default for the HTML format
31. format == :html && handler == :erb
32. *.html.erb → Herb
33. *.html.erb → Herb *.****.erb → Erubi
34. bin/rails herb:check
35. config.action_view .erb_implementation=
36. config/application.rb config.load_defaults 8.2
37. Rails 8.2 defaults .erb_implementation = :herb
38. Restore previous behavior .erb_implementation = :erubi
40. LSP features
41. Find all references
44. Hover Previews for render calls
46. Extract to Partial Code Action
50. Cross File Diagnostics
52. Runtime Instrumentation
53. ActiveSupport::Notifications .subscribe("sql.active_record") do |*, payload| Herb::Engine::Report::Session.observe( :queries, payload ) end
54. Runtime Diagnostics
57. Run the Linter on rendered page
59. Improved Error Screen
61. LSP Runtime Inlay Hints
65. 68 new linter rules
67. 166 linter rules
70. https://herb-tools.dev/blog/whats-new-in-herb-v0-11
71. What does this enable?
72. The Herb foundation is available in all new apps
73. The Compiler as a Platform
74. One-Person Framework
75. Rails 7 brought a lot of simplification with Hotwire
76. HTML-over-the-wire
77. Rails 8 brought a lot of simplification with the Solid Trifecta
78. The View Layer in Rails doesn't scale the same way as the rest of the framework does.
79. What becomes possible when the engine and runtime also understand HTML?
80. How can we evolve Hotwire so you can build competitive, modern, and ambitious UIs?
81. What does it take to complete the Hotwire story?
82. Reactivity
83. Fine-grained reactivity
84. The design goal for Herb tooling was to be fully backwards compatible for existing HTML+ERB files
85. I was curious if we can do the same for templating, reactivity, and interactivity.
86. I wanted to explore if there is a way how I can revisit some of the old and untapped ideas from StimulusReflex
89. ActionView
90. ActionView Reimagined
91. ActionView Reimagined Reengineered
92. ActionView Reimagined Reengineered Reactive
95. ReActionView v0.6
96. Reactivity for the HTML+ERB you already have.
97. Everything a clientside framework gives you, without adopting one.
98. And the best thing?
99. You already wrote a ReActionView template.
100. Your existing HTML+ERB views are now reactive.
101. 6 Adoption Levels of ReActionView
102. Level 1 - Better Errors Messages Level 2 - HTML-aware Engine Level 3 - Action View Optimizations Level 4 - Reactive ERB Views Level 5 - Client-side Templates Level 6 - External Components
103. Slots
104. <section> <h2><%= @title %></h2> <ul> <% @albums.each do |album| %> <li id="<%= album.id %>"> <%= album.name %> </li> <% end %> </ul> </section>
105. <section> <h2><%= @title %></h2> <ul> <% @albums.each do |album| %> <li id="<%= album.id %>"> <%= album.name %> </li> <% end %> </ul> </section>
106. <section> <h2><%= @title %></h2> <ul> <% @albums.each do |album| %> <li id="<%= album.id %>"> <%= album.name %> </li> <% end %> </ul> </section>
107. <section> <h2><%= @title %></h2> <ul> <% @albums.each do |album| %> <li id="<%= album.id %>"> <%= album.name %> </li> <% end %> </ul> </section>
108. Herb fully understands what the view is doing
109. So we can compile the template into two formats to support reactivity.
110. One for the regular render, and one for this new slots format
111. <h2>Hello, <%= @title %>!</h2>
112. <h2>Hello, Deccan Queen!</h2>
113. <h2>Hello, Deccan Queen!</h2>
114. <h2> Hello, <!--herb-slot:1-->Deccan Queen<!--/herb-slot:1-->! </h2>
115. <h2> Hello, <!--herb-slot:1-->Deccan Queen<!--/herb-slot:1-->! </h2>
116. <!--herb-region:test.html.erb--> <h2> Hello, <!--herb-slot:1-->Deccan Queen<!--/herb-slot:1-->! </h2> <!--/herb-region:test.html.erb-->
117. <!--herb-region:test.html.erb--> <h2> Hello, <!--herb-slot:1-->Pune<!--/herb-slot:1-->! </h2> <!--/herb-region:test.html.erb-->
118. Both the server and the client have a map of where the dynamic slot values go
119. Wherever new values come from, the client knows how to update it.
120. ERB Output Collections/Loops Conditionals
121. No page reloads. No DOM-morphing.
122. <div class="container"> <%= Time.now %> </div>
123. <div class="container"> <%= Time.now %> <button data-herb-action="$refresh">Refresh</button> </div>
124. <div class="container"> <%= Time.current %> <button data-herb-action="$refresh">Refresh</button> </div>
125. GET /demo Accept: application/vnd.herb.slots+json
126. def show end
127. def show respond_to do |format| format.html end end
128. def show respond_to do |format| format.html format.slots end end
129. GET /demo Accept: application/vnd.herb.slots+json { "template": "app/views/demo/show.html.erb", "version": "ddfca612", "occurrence": 0, "slots": { "0": "2026-09-24 12:14:38 +0200" } }
130. GET /demo Accept: application/vnd.herb.slots+json { "template": "app/views/demo/show.html.erb", "version": "ddfca612", "occurrence": 0, "slots": { "0": "2026-09-24 12:14:38 +0200" } }
131. State
132. Not every UI interaction should require a serverroundtrip
133. Typically you would reach for Stimulus
134. But, what if you could just write this in ERB?
135. <button>Show Details</button> <% if show? %> <span>Here are the details!</span> <% end %>
136. <%# herb:state (show: false) %> <button>Show Details</button> <% if show? %> <span>Here are the details!</span> <% end %>
137. <%# herb:state (show: false) %> <button data-herb-set="click->show=true">Show Details</button> <% if show? %> <span>Here are the details!</span> <% end %>
138. <%# herb:state (show: false) %> <button data-herb-set="show=true">Show Details</button> <% if show? %> <span>Here are the details!</span> <% end %>
139. <%# herb:state (show: false) %> <button data-herb-set="show=true">Show Details</button> <% if show? %> <span>Here are the details!</span> <% end %>
140. <%# herb:state (show: false) %> <button data-herb-toggle="show">Show Details</button> <% if show? %> <span>Here are the details!</span> <% end %>
141. data-herb-set data-herb-action data-herb-toggle data-herb-increment data-herb-decrement
142. Two-way bindings
143. <input value="<%= message %>">
144. <%# herb:state (message: "") %> <input value="<%= message %>">
145. You now got a twoway binding
146. <%# herb:state (message: "") %> <input value="<%= message %>"> <p><%= message.length %> characters</p>
147. No network request needed
148. No custom JavaScript needed
149. Just pure understanding and efficient updates
150. No Ruby to JavaScript transpilation
151. So we don't need to run Ruby in WebAssembly in the browser
152. ReActionView sees all the methods that are being called on a herb:state local variable
153. The compiler understands a subset of Ruby that it can wire into the reactivity model
154. That way, it can run fully client-side without a server round-trip
155. For everything the compiler doesn't support, we do a network request
156. <%# herb:state (q: "") %> <input value="<%= q %>"> <% if q.present? %> <p><%= Topic.search(q).count %> results</p> <% end %>
157. The compiler prepares the view in a way so the client knows on which state change it has to rerequest the data
158. When the client has to request it, the server knows how to respond
159. and the client knows how to update and insert the new dynamic slot values
160. No Turbo Frames No Turbo Streams No new route
161. Just pure understanding of the view and finegrained reactivity.
162. Lazy Loading
163. <p><%= Stats.slow_query %></p>
164. <Async> <p><%= Stats.slow_query %></p> </Async>
165. <Async> <p><%= Stats.slow_query %></p> <Fallback> <p class="skeleton">&nbsp;</p> </Fallback> </Async>
166. <Lazy> <p><%= Stats.slow_query %></p> <Fallback> <p class="skeleton">&nbsp;</p> </Fallback> </Lazy>
168. Open to feedback about naming
170. Optimistic UI
172. You can do a lot with pure ERB
173. If you need to, there is a JavaScript API you can use to interact with the client runtime directly
174. Which also allows to build even more ambitious UIs, or allows to wire up NPM packages
175. bundle add reactionview rails generate reactionview:install
176. reactionview.dev demo.reactionview.dev
177. Outlook/Vision
178. View File Scoped CSS
180. <style scoped>
181. <style scoped> .example { color: red; } </style> <template> <div class="example"> Hello World </div> </template>
182. <style scoped> .example { color: red; } </style> <template> <div class="example"> Hello World </div> </template>
183. <style scoped> .example { color: red; } </style> <template> <div class="example"> Hello World </div> </template>
184. <style> .example[data-v-f3f3eg9] color: red; } </style> <template> <div class="example" data-v-f3f3eg9> Hello World </div> </template>
185. lightningcss-ruby
186. <script scoped>
187. <script scoped> $button.addEventListener("click", () => {...}) </script> <div data-herb-target="button">Click</button>
188. <script scoped> $button.addEventListener("click", () => {...}) </script> <div data-herb-target="button">Click</button>
189. <script scoped> let show = false </script> <div data-herb-toggle="show">Toggle</button> <% if show? %> Show it! <% end %>
190. <script scoped> let show = false </script> <div data-herb-toggle="show">Toggle</button> <% if show? %> Show it! <% end %>
191. <script scoped> function toggle(){ ... } </script> <div data-herb-action="toggle">Toggle</button>
192. <script scoped> function toggle(){ ... } </script> <div data-herb-action="toggle">Toggle</button>
193. <script scoped> let show = false function toggle(){ show = !show } </script> <div data-herb-action="toggle">Toggle</button> <% if show? %> Show it! <% end %>
194. <script scoped> import { ... } from "..." </script>
195. oxc-ruby
196. rolldown-ruby
197. Offline Mode React Components Herb Components for gems Client-side routing
198. Conclusion
199. I'm really happy with the direction Herb and ReActionView are taking and how they are shaping up
200. And, how we can go back to just keep writing ERB views and get fully reactive UIs
201. I believe that this offers a great foundation for the future of the Rails frontend
202. The idea is to offer a spectrum for teams to adopt
203. Expand what's possible with Hotwire today
204. Allow people to write more JavaScript if the application needs it
205. And in case you'd want to use React or existing components, that you still have a way to use them alongside your ERB views
206. Without having to abandon the full-stack approach that makes Rails so special
208. ReActionView has become what I always wanted StimulusReflex to be
209. But I'm sure there are more things we can do, improve, and iterate on.
210. But I can't do it all by myself, I need your input.
211. I would love to talk to you if you have ideas or opinions about the things I have shown today.
212. Or if you are still skeptical and have questions on where things are heading
213. I would love your input and feedback
214. Acknowledgments
217.  github.com/sponsors/marcoroth
218. Thank you for the continued support!
219. Please try the tools, report issues, and give feedback.
222. herb-tools.dev reactionview.dev
226. Thank you "  @marcoroth 🌐 marcoroth.dev  @marcoroth_  @marcoroth.dev  @marcoroth@ruby.social  /in/marco-roth