Vercel and Shopify Rebuild Hydrogen Framework as Open Source and Runtime-Agnostic

Vercel and Shopify announced at the Vercel Ship 26 conference in New York that they are completely rebuilding the Hydrogen framework for headless commerce, making it open source and runtime-agnostic — now it will be able to run in any environment where JavaScript is executed, not just in conjunction with a specific stack.

What will change in the new architecture

Hydrogen previously simplified the launch of headless storefronts but was difficult to port between stacks. The new version is open and not bound to a runtime: developers will be able to build a store in Svelte, Nuxt, Next.js or on their own framework.

• Announcement made at Vercel Ship 26 conference in New York
• New version of Hydrogen — open source and runtime-agnostic
• Svelte, Nuxt, Next.js and arbitrary frameworks supported
• Architecture divided into three layers: core, client and server

How the core layer is structured

Previously, each team wrote "glue" code on their own to work with Shopify API — for example, to format prices: the API returns not a number, but its own MoneyV2 type, where the amount is encoded as a string. Now this logic is extracted into a common core layer based on standard Intl.NumberFormat: the developer calls the ready-made formatMoney function and gets a formatted price without writing and maintaining their own wrapper. When Shopify API changes, updating becomes trivial, not a manual fix in every project.

What the client layer does

The client layer handles repeated solutions for rendering — primarily the shopping cart state. Previously, everyone who built a commercial application wrote their own version of a cart provider: methods for adding, updating and removing items, applying discounts, working with currency, error states, synchronization between browser tabs. In the new version of Hydrogen, cart state is connected by a single useCart hook import, not rewritten from scratch in each project.

What this means

Vercel and Shopify extract the repeated logic of online stores — price formatting, cart state — into a common open layer that is fixed and improved once for everyone, instead of each team solving the same tasks over again on their own stack.

Frequently asked questions

On which frameworks can I use the new Hydrogen?

The framework is runtime-agnostic and explicitly supports Svelte, Nuxt, Next.js, and also allows connecting your own developer framework.

What layers does the new Hydrogen architecture consist of?

Developers distinguish three layers: core (general logic for working with Shopify API), client (UI state and cart) and server.