Hydrogen rebuilt as open-source, runtime-agnostic framework

Hydrogen made headless storefronts easy to ship, but not portable. At Vercel Ship 26 in New York, we announced that we are working with Shopify to rebuild it from the ground up, a shared bet on a web.more open

The new version is open source and runtime agnostic, meaning it can run anywhere JavaScript does. You can build with , , or even bring your own custom framework.SvelteNuxtNext.js

Our strategy includes three layers: core, client and server.

Core is the JavaScript we all used to write for the Shopify API, and never shared. Now it lives in one place.

Take . The open web already solved most of this with .formatMoneyIntl.NumberFormat

But the Shopify API doesn't hand you a . It responds with a custom type, , and the amount is a signed decimal number serialized as a string.numberMoneyV2

The result is the same, but you’re not writing or maintaining the glue code anymore. When the API changes, the upgrade is trivial.

Centralize the core and you fix each bug once, ship improvements to everyone, and get back to building.

Rendering what the core returns involves the same repeated decisions. Cart state is the obvious one.

Anyone who's built a commerce app has written a version of this. Different code every time, all chasing the same things.

With Hydrogen, the client layer now handles the cart. State management becomes one import.

Centralize this and you get the best practices for free, so you can spend your time on the parts that are actually yours to build. It's available for React today on the Hydrogen , with more frameworks coming.preview branch

Developers need full-stack access to build storefronts that scale without sacrificing performance. Static content should serve instantly from a CDN while dynamic data like inventory streams in.

The open-source community solved this with frameworks like Next.js, Nuxt, and SvelteKit: full-stack capabilities with no lock-in to a proprietary runtime.

Say your storefront caches product queries with on-demand revalidation. You write the GraphQL query. Hydrogen gives you a type-safe client. Next.js handles caching, and you get full-stack frameworks plus the headless Shopify API with none of the glue code.

Shopify already supports these frameworks through its Headless sales channel, but until now we’ve each written our own bindings to the same API contract. At this layer, the fix is guidance, not more code. Humans and agents both need to know how to use what these frameworks already do, instead of reinventing it for Shopify.

That guidance ships as documentation, templates, and skills.

Before Hydrogen, we built , our own template for agentic commerce. It makes going headless with Next.js and Shopify easier.vercel.shop

It worked, and now we're going further. We'll fold everything we learned building into Hydrogen at the client and server layers. Once Hydrogen is stable, adopts it and becomes our reference for building storefronts with Hydrogen and Next.js.vercel.shopvercel.shop

Vercel’s goal is simple: build a better web, for everyone.

With Hydrogen, that means the best developer experience without locking you into a runtime, framework, or platform.

We're building this in the open. Follow along on : try it, fork it, and help shape what comes next.GitHub

Read more

The core

The client

The server

How it relates to vercel.shop

Going forward