Build With Hydrogen: Developer Preview Now Available

At Shopify Unite 2021, we shared a preview of Hydrogen, a React-based framework for building custom storefronts powered by Shopify. We think the future of commerce on the web is fast, personal, and dynamic—and Hydrogen reflects how we see that vision coming to life. 

Today, we are excited to share that Hydrogen is now available in developer preview! By pairing together a quickstart environment with a powerful set of components optimized for commerce by Shopify, Hydrogen will help you build unique custom storefronts faster than ever before.

Working with millions of merchants globally has taught us that commerce requires a fast user experience that’s personalized and contextual, no matter where customers are. This represents a big challenge for developers, choosing between different technology stacks with their trade offs towards speed or dynamism. Hydrogen makes this simpler by bringing together a variety of technologies that enable you to build those dynamic experiences without giving up performance.

We are building Hydrogen as Shopify’s opinionated solution to bring the best out of the intersection between commerce, UX, and developer experience—leveraging our technology and commerce expertise to make it simple, fast, and fun for developers. Hydrogen is fully open source and we want to build it with you: we’d love for you to try it out and help us make it better with your feedback.

Explore Hydrogen

Powering tomorrow’s commerce

Hydrogen’s building blocks enable you to deliver great commerce experiences out of the gate. The combination of streaming Server-Side Rendering (SSR) unlocks fast first render, React Server Components deliver efficient post-render state updates, and built-in caching and data fetch policies enable merchants to achieve balance between optimal commerce and user experience.

Delivering these capabilities required pushing the boundaries of what’s possible with React and Vite, as well as careful attention to building optimized components and developer tools. We’ve been working closely together with the React core and Google’s Aurora team to make this possible, and we’re excited to see community feedback and what it will unlock for developers.

For more details on Hydrogen’s architecture, check out our developer documentation.

Skip setup and start building

We truly believe that developing should be fun—so with Hydrogen you can go straight from designing to building quickly, without spending time on scaffolding or configuration.

Hydrogen includes a starter template that gets your storefront started with a full purchasing journey out-of-the-box within minutes. This template initializes the basic file structure of a project already integrated with a Shopify store, so you can skip setup and start coding right away.

Hydrogen accelerates the development process with ready-to-use components, hooks, and utilities built around Shopify data models that do most of the heavy lifting. These pieces integrate directly with the Storefront API for efficient data-fetching, saving time from crafting GraphQL queries to interact with Shopify APIs or other third-party data sources.

Full customization of these components and the look and feel of your storefront is fundamental to stand out, which is why Hydrogen also uses Tailwind CSS to simplify and accelerate styling.

As you’re building, the development environment powered by Vite enables rapid feedback loops, builds and modules management, and hot reload for a smooth developer experience.

Help us build Hydrogen

Hydrogen is open source for a reason: we want to build it with you. Your feedback on the architecture, APIs design, and developer experience will help us shape the framework and tools. We’ll keep iterating quickly over the next few months to evolve Hydrogen based on your feedback, and get it ready to power the next generation of storefronts. Please try it out and let us know what you think! Here’s how to get started: 

• Explore Hydrogen with just one click
• Follow this tutorial to begin developing your custom storefront with Hydrogen
• Join the Hydrogen community on GitHub and share your feedback in the repo
• Let us know about your experience through this short survey
• Register for the next edition of Partner Town Hall—it’s a Hydrogen takeover! Find out the latest from the product and engineering teams, submit your questions live, and check out a Hydrogen demo

This article originally appeared on the Shopify Web Design and Development blog and is made available here to educate and cast a wider net of discovery.