How We Built Hydrogen: A React Framework for Building Custom Storefronts

We’ve been building Hydrogen, a React framework for building custom storefronts on Shopify, for more than a year. We invested in cutting-edge new technology, like React Server Components, to ensure building on the Shopify platform is a terrific experience for developers. 

Here’s a look behind the scenes at how we did it, what we learned from making big bets, and what it was like building a new framework from the ground up on experimental technology.

We built Hydrogen to solve a problem merchants—especially larger merchants—were facing: How do I use Shopify’s storefront API to build a custom storefront without losing everything I get for free with a Liquid storefront? While merchants would get the benefit of a completely custom storefront, they would also face problems like picking a framework, building primitives for cart and product selection, performance, testing, accessibility, hosting, scaling, observability, and analytics.

Before Hydrogen, merchants were left with other framework options that required them to start with bulky templates or build something entirely from scratch. We believe commerce is inherently dynamic, and we found that JAMStack-oriented frameworks, which build static versions of sites and require constant re-builds, weren’t the best fit for Shopify. That’s why we went all in on building Hydrogen, our dynamic custom storefronts framework powered by React. Hydrogen aims to solve all of these problems for merchants by default, speeding up development time. Developers should enjoy building on a platform, and Hydrogen is built with the best developer experience in mind.

Leave a Comment