Herb to ReActionView: A New Foundation for the View Layer @ RubyConf TH 2026, Bangkok, Thailand

This keynote is an overview of how Herb came to be, what Herb can do for you today, and what the future with ReActionView might look like and how Herb could enable it.

Transcript

1. Marco Roth Herb to ReActionView: A New Foundation for the View Layer January 31, 2026 - RubyConf TH 2026
2. Marco Roth !  @marcoroth_  @marcoroth@ruby.social 🌐 marcoroth.dev  @marcoroth Full-Stack Developer & Open Source Contributor  @marcoroth.dev
3. I ❤ Open Source
5. Ruby is elegant. Ruby is expressive. Ruby is a joy.
6. I want to keep Ruby as attractive as possible
7. I want to keep Ruby as productive as possible
10. CableReady Core Team Maintainer
11. Developer Tooling
12. 2023 Stimulus LSP
13. 2024 Turbo LSP
14. Herb Ecosystem
15. ReActionView
17. The JavaScript tooling and DX is awesome
20. Teaching at Bootcamps Mentoring Early-Career Engineers Helping Businesses with Hotwire
21. Lack of Feedback and Tooling
22. Source of Frustration
23. It's not just about the tooling
24. But also about the choices and decisions
25. Rails is Omakase
26. Which limits the decisions you have to make
27. The Rails defaults are awesome
28. These defaults make Rails so productive
29. The industry doesn't stand still
30. The expectations of modern web applications shifted drastically over the last years
31. The web platform also improved a lot over the last decade
32. <dialog> Web Components Progressive Web Apps (PWA) Custom Elements <script type="importmap"> inert modulepreload Declarative Shadow DOM
33. subgrid Container Queries :has() @function @property CSS Nesting @layer
34. Speculation Rules API Invoker Commands API View Transition API Popover API HTML Sanitizer API moveBefore()
35. Encapsulation View Boundaries Reusability/Organisation Performance Tooling Testing Frontend Logic/Complexity
38. I've been wondering how we could approach this problem
39. With the goal to keep it as backwards compatible as possible
40. Make it feel as familiar to what Action View has been doing for over two decades
41. So we can write powerful and ambitious applications using Full-Stack Ruby
42. Today
43. Marco Roth Herb to ReActionView: A New Foundation for the View Layer January 31, 2026 - RubyConf TH 2026
44. How Herb came to be? How can Herb help? What's next?
45. How Herb came to be?
46. June 2021
47. app/javascript/controllers/user_profile_controller.js 📄
48. import { Controller } from "@hotwired/stimulus" export default class extends Controller { connect() { console.log("User Profile connected") } }
49. import { Controller } from "@hotwired/stimulus" export default class extends Controller { connect() { console.log("User Profile connected") } }
50. <div data-controller="user_profile"> </div>
52. import { Controller } from "@hotwired/stimulus" export default class extends Controller { connect() { console.log("User Profile connected") } }
53. <div data-controller="user_profile"> </div>
54. <div data-controller="user-profile"> </div>
55. These mistakes happen so easily
57. Available Now Stimulus LSP
60. HTML-only
61. No ERB support
62. <div data-controller="hello"> <input data-hello-target="name" type="text"> <button data-action="click->hello#greet"> Greet </button> <span data-hello-target="output"></span> </div>
63. <%= tag.div data: { controller: "hello" } do %> <%= content_tag :input, data: { hello_target: "name"} %> <%= button_tag data: { action: "click->hello#greet" } do %> Greet <% end %> <%= tag.span data: { hello_target: "output" } %> <% end %>
64. Missing support for HTML+ERB and Rails- specific helpers
65. Turbo LSP
66. ERB Support in Ruby LSP
67. RubyConf 2023
70. A few failed attempts
71. I wanted to tackle the bigger picture
72. HTML+ERB Parser
73. HTML-aware ERB parser
74. HTML-aware ERB Parser Structural Awareness of HTML+ERB templates
75. February 2025
76. Empowering Developers with HTML-Aware ERB Tooling Marco Roth April 16, RubyKaigi 2025
77. Herb Parser releases in April 2025
78. HTML-aware ERB Parser https://www.youtube.com/watch?v=EIoGfMGsiZI
81. Herb Linter Herb Formatter Herb Language Server
84. This is already a rich ecosystem
85. How Herb came to be? How can Herb help? What's next?
86. No Setup Low Config
87. It should just work, even if you haven't setup or installed anything.
88. Where to start?
89. Herb Language Server
94. vim.lsp.enable('herb_ls')
100. Herb Linter
102. No style guide on how to write to good views
103. A way to help guide people towards best practices
104. Avoid Common Mistakes Enforce Consistent Style Improve Accessibility (a11y)
111. 50 Linter Rules
112. Ideas for 60+ new rules
113. Herb Formatter
114. HTML+ERB Auto-Formatter
115. <div><h1><%=@title%></h1><%if user_signed_in?%> <p>Welcome,<%= current_user.name%>!</p><%else%> <p>Please<%= link_to"sign in",login_path%>.</ p><%end%></div>
116. <div><h1><%=@title%></h1><%if user_signed_in?%> <p>Welcome,<%= current_user.name%>!</p><%else%> <p>Please<%= link_to"sign in",login_path%>.</ p><%end%></div> S cmd
117. <div><h1><%=@title%></h1><%if user_signed_in?%> <p>Welcome,<%= current_user.name%>!</p><%else%> <p>Please<%= link_to"sign in",login_path%>.</ p><%end%></div> npx @herb-tools/formatter
118. <div> <h1><%= @title %></h1> <% if user_signed_in? %> <p>Welcome, <%= current_user.name %>!</p> <% else %> <p>Please <%= link_to "sign in", login_path %></p> <% end %> </div>
121. npx @herb-tools/linter npx @herb-tools/formatter
122. - name: Herb Linter run: npx @herb-tools/linter - name: Herb Formatter run: npx @herb-tools/formatter --check .github/workflows/lint.yml
126. Herb Linter --fix
129. Herb Language Server Fix-on-Save
131. .herb.yml
132. One config File Linter Linter Rules Formatter
133. Custom Herb Linter Rules
134. <%# herb:disable %>
137. https://herb-tools.dev/blog/whats-new-in-herb-v0-8
138. So far this has all been about tooling.
139. Working on these tools made me realize something
140. If you have all this introspection and knowledge about HTML+ERB templates
141. You can also render and evaluate HTML+ERB templates
143. ::Engine Herb
144. HTML-aware ERB Rendering Engine
145. Erubi::Engine API-compatible
146. It's using the Herb Parser to parse the templates
147. Can ensure valid HTML Templates and Syntax
150. The Herb Parser already exactly knows where the error is
153. Since we control the rendering now
154. We can inject additional HTML attributes in development
155. <html data-herb-debug-file-name="application.html.erb" > ... </html>
156. [data-herb-debug-file-name] { outline: blue dotted 2px; outline-offset: 2px; } // ...
159. <html data-herb-debug-outline-type="view" data-herb-debug-file-name="application.html.erb" > ... </html>
162. <html data-herb-debug-outline-type="view" data-herb-debug-file-name="application.html.erb" data-herb-debug-file-relative-path="..." > ... </html>
164. <html data-herb-debug-outline-type="view" data-herb-debug-file-name="application.html.erb" data-herb-debug-file-relative-path="..." data-herb-debug-file-full-path="..." > ... </html>
168. Show ERB content on hover
171. Jump-to-source
173. This gives us valuable feedback
175. The same parser that's now compiling/rendering your views is also running in your editor
176. Makes the tooling a lot more accurate and instant
177. String Templating Engine HTML Templating Engine ↓
178. Our engine is now aware of its HTML surroundings and can enhance it
180. Now we have tooling and rendering figured out
181. What is next?
182. ActionView
183. Reimagined ActionView
184. Reimagined Reengineered ActionView
185. Reengineered Reimagined ActionView Reactive
187. An initiative to explore what’s possible in the Rails view layer in 2025 and beyond
188. A vision with 6 adoption levels
189. 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
190. ReActionView integrates Herb::Engine into Rails applications
191. bundle add reactionview rails generate reactionview:install
192. # config/initializers/reactionview.rb ReActionView.configure do |config| # Intercept .html.erb templates # config.intercept_erb = true # Enable debug mode in development config.debug_mode = Rails.env.development? end
193. # config/initializers/reactionview.rb ReActionView.configure do |config| # Intercept .html.erb templates config.intercept_erb = true # Enable debug mode in development config.debug_mode = Rails.env.development? end
200. 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
201. Level 3 - Action View Optimizations
202. Inlining Partial render calls Inlining Action View Tag Helpers Minifying insignificant whitespace
203. Level 4 - Reactive ERB Views
204. StimulusReflex Phoenix LiveView
205. Level 5 - Client-side Templates
206. Limited Set of ERB
207. "ERB Client Components"
208. Web Components React Components ...
209. Level 6 - External Components
210. When you need more and don't want to abandon HTML+ERB alltogether
211. Only on certain pages
212. pin "@rails/actioncable", to: "actioncable.esm.js" pin "@rails/activestorage", to: "activestorage.esm.js" pin "@rails/actiontext", to: "actiontext.esm.js" pin "trix" pin_all_from "controllers" importmap-rails
213. Register external components import [:Alert, :AlertTitle], from: "shadcn" import_all_from "app/javascript/components" config/initializers/reactionview.rb
214. <h1><%= @post.title %></h1> <Alert variant="default"> <AlertTitle>Heads up!</AlertTitle> </Alert> app/views/posts/show.html.herb
215. The engine knows that these components are client-side and knows how to mount/hydrate them
217. https://www.youtube.com/watch?v=lTL2-ERM_yY
218. If you are building ambitious apps and believe this is important
219. I'm looking for companies that want to support the project as strategic partners
220. To help shape how this future might look like.
221. Please get in touch
222. Conclusion
223. The Ruby Prism Parser had a big effect on Ruby internals and the tooling landscape
224. Herb already has a similar effect for HTML Templating and Tooling
225. Herb started as a Parser
226. and is now an ecosystem of valuable tools
227. Which unlocks a whole set of new tools to be built
228. I believe that this already shows what could be possible
229. We can push more boundaries
230. The community has built incredible tooling for Ruby itself.
231. Now it's time to bring that same care to the view layer.
232. With Herb and ReActionView I believe we have a path to level up the view layer
233. Herb::Engine
235. At the beginning of 2025 I had now idea what this year would bring
236. Writing a new HTML+ERB parser and building an ecosystem was not on my bingo card
238. On demand learning is really powerful
239. Projects like these are great to learn new languages and skills
240. I haven't written any C code before this project
241. I haven't dealt with Ruby C Extensions before
242. I was a great excuse to learn more about WebAssembly
244. But I think it really goes to show what a bit of dedication can yield
245. How it can influence the trajectory of a templating language
246. and the whole developer experience around it
248. I hope this talk has given an overview of Herb and its potential
249. Please try the tools, report issues, and give feedback.
251. github.com/sponsors/marcoroth 
254. herb-tools.dev
255. I believe there is a bright future for the Ruby Frontend Story
256. Build your new applications in Ruby
257. Build your new open source in Ruby
258. With a bit of dedication and time you can build awesome things.
259. Be the change you want to see in the world
260. Thank you #  @marcoroth_  @marcoroth@ruby.social 🌐 marcoroth.dev  @marcoroth  @marcoroth.dev  /in/marco-roth