Developer Roundtable: Herb

Herb, created by Marco Roth, is a new HTML-aware ERB parser designed to improve developer tooling for Rails view templates. Unlike traditional parsers that either ignore embedded Ruby or modify the original HTML, Herb understands both HTML and ERB simultaneously while preserving the source exactly as written. This makes it fast, error-tolerant, and suitable for real-time editor features. By generating a precise syntax tree for .html.erb files, Herb enables better formatters, linters, language server integrations, and other tooling for modern Rails applications. Throughout this blog post, the images used are pulled from various blog posts by Marco Roth about Herb.

Historically, Ruby developers have had gems like Nokogiri, that parse their html. Nokogiri can detect when you’re missing a closing tag, using the wrong tag, or need to update your code for security reasons. This is just a basic example of what Nokogiri can do, and I encourage you to dive deeper into the linked URL to learn more. The shortcoming of Nokogiri is that it’s just an HTML parser, not an ERB parser, and it modifies your files for you. While that can be useful, it’s also limiting.

How does Herb set itself apart, and what makes it special and different from current HTML/ERB parsers?

Today, in a Rails application, when your HTML template has an error, it shows up in the browser, but the way it’s displayed isn’t very helpful. You’ll typically see red text on a white screen showing the problematic code, and you have to sift through it to figure out where and what the issue is.

With Herb, you’ll see exactly where and what is wrong. Herb shows a top red banner detailing the issue because the parser already knows what’s wrong. It might display something like “Template errors (1)” and then show the file and exact location of the error. This makes debugging easier and faster.

Similarly, when you have warnings about your code, like invalid nested <p> tags, Herb will display them. You can review and dismiss these warnings if you choose, allowing you to continue your development workflow uninterrupted.

Currently, developers use lots of tricks when debugging template errors in their applications. I’m speaking from my own experience and from what co-workers, friends, and random people on the internet have shared. Tricks are necessary because it’s not always easy to know what kind of template error you’re facing or where in your code it’s coming from. It’s not readily apparent, so it requires a bit of sleuthing and detective work to figure out what’s going on.

Some common debugging tricks include rendering comments in the HTML to mark elements for easier visualization, opening the browser inspector to locate those comments, or deleting portions of code to see what disappears after a refresh, helping you locate where something lives in the application. Another example is adding visible borders (like thick red outlines) to containers, divs, or elements to identify where they are on the page. There are countless variations of these techniques, but you get the gist, they exist because debugging templates are inherently limited.

Herb lets you skip all those clever workarounds. You can apply a data attribute like data-herb-debug-file-name and style it in your CSS to get visual outlines of elements. You can even specify types with attributes like data-herb-debug-outline-type="view", which color-codes different types for clearer visual differentiation. Additional labels let you show the full file path, and clicking a path can take you directly to that file in your editor.

You can do the same with ERB output tags. A dropdown toggle menu on the right side of your application (in development mode) lets you control debugging behavior like, for example, showing ERB output tags on hover. Hovering over dynamic content, such as link_to elements, will show what the link_to tag looks like. Just like the HTML tags, you can click these to open the corresponding file and line in your editor. To set this up, follow these steps.

This is all really exciting to see. In my opinion, Herb is a game changer for working with the front end of your application and will save countless hours of development time. It’s easy to understand, simple to integrate, and yet incredibly powerful in its impact. If you spend a lot of time in Rails views, it’s absolutely worth trying in your next project.

If you’re looking for a team to help you discover the right thing to build and help you build it, get in touch.