Back to HTML: Introducing Trimmings

For most of my career I’ve advocated for an HTML-first approach to building websites. To me, an ideal web project leaves client-side JavaScript as a final touch, progressively enhancing a site that already functions desirably without it.

Libraries like Backbone, Turbolinks, and Stimulus attempt to augment “the HTML you already have” with varying degrees of success and adoption, but the industry seems to have drifted away from this idea in favor of complex client-side approaches (like React). We’ve convinced ourselves that it’s impossible to simply serve HTML web pages and deliver the experience our users expect, but often the most complicated projects have the most to gain from this approach.

That’s why I decided to build Trimmings, a new tool for people who build websites.

Trimmings is a free, zero-configuration JavaScript library that adds a layer of smooth and fast in-page interaction to your web pages. All you have to do is add some hints to the HTML you already have. Once you’ve built your website and it’s serving HTML that’s presented the way you like it, you can start adding Trimmings hints (as data-* attributes) that enhance your page’s interactions. This includes things like loading a section of a page in a modal on the current page when the user clicks a link, or pre-fetching linked content and embedding it in the current page as soon as it’s loaded.

Get Trimmings on GitHub now:

Trimmings provides a broad set of features that enable the most common interactions that aren’t possible with just HTML and CSS. Using a declarative syntax within your existing markup, Trimmings turns regular links and forms into modals, embeds, and more, without any custom JavaScript.

Why HTML?

Nearly any web project can benefit from serving HTML over HTTP without the interference and extra surface area of client-side logic written in JavaScript. Depending on static HTML improves reliability, reduces the possibility for errors, and makes caching and testing much easier. To test the limits of a modern website that’s powered by HTML and Trimmings, we’ve assembled a few examples.

Adopting Trimmings requires no specific technology but does work best when a website is built to serve HTML from meaningful URLs. Learn more about how to set yourself up for success with Trimmings in the Getting Started guide.

With Trimmings, you can start thinking more about HTML and less about JavaScript. Explore Trimmings examples, try it out on your next web project, and let us know what you think.

John Holdun is a lead engineer at Postlight. Drop us a note: hello@postlight.com.