Columns2026/07/10

The Evolution of Shopify Hydrogen and its Future Direction: From Custom Design to a Framework-Agnostic "Toolkit"

What you'll learn

→ What Hydrogen enables, seen through real sites (Lady Gaga and others)
→ The architectural journey: custom RSC → Remix → React Router 7
→ The 2026 toolkit shift and Vercel's involvement (Vercel Ship 26)
→ The beta/GA timeline and a React-first reality check

Since its introduction in 2021, Shopify's headless commerce development platform "Hydrogen" has undergone fundamental architectural shifts multiple times. It's been a series of bold decisions — adopting the latest frontend trends, then course-correcting when the reality didn't match the vision. This post traces the path Hydrogen has taken and maps out where it's heading.

For merchants and developers evaluating headless commerce, the central question is: "If I adopt this today, what will it look like in a few years?" Understanding how Hydrogen has handled change is the best available signal.

First, What Has Actually Been Built with Hydrogen?

Before diving into the history, it helps to see what Hydrogen looks like in practice. Real-world examples communicate the possibilities more clearly than any abstract comparison.

Lady Gaga (ladygaga.com)

One of the most prominent examples is Lady Gaga's official website. Previously, editorial content lived at ladygaga.com while a separate Online Store 2.0 storefront operated at shop.ladygaga.com. These were merged into a single Hydrogen site. Leveraging Hydrogen's flexibility, the team built experiences that would be impossible with standard themes — including a 3D album showcase and a mood-responsive background system. Content management was handled via the headless CMS Sanity, enabling both editorial and commerce to coexist.

According to Shopify's official announcement, the relaunch produced an immediate 128% increase in add-to-cart rate and a 55% increase in average order value (AOV), and the site won three Webby Awards. It's a clear illustration of how Hydrogen's core strength — owning the URL structure and frontend experience — can translate directly into brand and business value.

Allbirds

DTC pioneer Allbirds is another early and prominent adopter. Their site was rebuilt on Hydrogen, reportedly connecting 35 country storefronts with 50 physical retail locations. It's a large-scale enterprise use case where Hydrogen powers an integrated global online-offline experience.

Carhartt WIP (North America)

The North American site of workwear brand Carhartt WIP is a well-known example of a Hydrogen + Sanity build. The pairing suits editorial-heavy brands that want to blend content and commerce — a use case where Hydrogen and headless CMS work in tandem.

What these examples share is a common motivation: "We need to express our brand in ways that go beyond what a theme allows." Keep this framing in mind as you read through the history below.

Why the History Matters

Headless storefronts are long-lived investments — typically operated for years. When the underlying framework changes direction frequently, how those changes are handled (whether they're breaking, how easy migration is) has a direct effect on long-term total cost of ownership. Hydrogen is precisely the kind of framework that has changed direction multiple times. The way it has navigated those changes is the most honest predictor of what lies ahead.

2021–2022: Hydrogen v1 — A Bet on Custom React Server Components

Hydrogen's first public appearance was in 2021. Its defining feature was a bold bet on React Server Components (RSC). Shopify itself described RSC as "the biggest technical bet in Hydrogen."

The ambition of the moment was on full display at the developer event Shopify Unite 2021, which was held virtually due to COVID-19. CEO Tobi Lütke himself took the stage and wrote live Hydrogen (React) code in front of the audience. Having a CEO code live in React was a statement of intent: Shopify was going all-in on server-side React.

At the time, React's RSC implementation wasn't production-ready, so Shopify built its own. That implementation involved re-parsing rendered HTML to wrap client components — an approach that Shopify later acknowledged was "inefficient, fragile, and incapable of streaming." They chose to ship it anyway and declare it stable.

The bundler choice was equally forward-leaning: Vite was selected over Webpack at a time when Vite's SSR support was still in beta. Prioritizing RSC compatibility and developer experience speed over proven stability was the explicit trade-off.

Then in June 2022, the hosting layer that runs Hydrogen storefronts — Oxygen — launched in general availability for Shopify Plus (later expanded to all paid plans). The pairing of "development framework (Hydrogen) + hosting (Oxygen)" as a bundled offering was established here, and it's the model that persists today.

Late 2022–2023: The Remix Pivot — Hydrogen's Biggest Turning Point

The single most consequential moment in Hydrogen's history came on October 31, 2022, when the team behind the full-stack web framework Remix joined Shopify.

In response, Shopify made the decision to rebuild Hydrogen's foundation from its custom RSC base to Remix. The new version, released in 2023, was an architectural reset:

Data fetching changed entirely: v1 fetched data throughout the component tree (inside server components). The new version adopted Remix's model — data fetched in per-route loader functions.
Server state was prioritized: The architecture minimized useState, useEffect, and Context providers. The new demo store famously shipped with "zero providers."
Versioning changed too: Semantic versioning was dropped in favor of calendar versioning (e.g., 2023.1.0). In Shopify's words, "Hydrogen 2 doesn't technically exist — the next version is 2023.1.0." The "v2" label is just a common shorthand.

The migration from v1 involved breaking changes, though Shopify committed to making the path as smooth as possible. At the same time, a standalone package @shopify/hydrogen-react was introduced — a set of React components, Storefront API clients, and commerce utilities that could be used in any React environment, not just Remix.

2024–2025: Migration to React Router 7

Remix itself then charted a course toward merging into React Router 7 — a routing and data layer built by the Remix team that drops Remix-specific constraints. Hydrogen followed, migrating its foundation to React Router 7 (reflected in the Hydrogen 2025 series).

Today's architecture is: React Router 7 handles routing and data, while Hydrogen layers commerce functionality on top — Oxygen edge runtime, Storefront API client, cart, analytics, Customer Account, B2B, and so on.

Hydrogen also tracks Shopify's Storefront and Customer Account APIs on a quarterly release cadence (e.g., Hydrogen 2026.4.0 corresponds to API version 2026-04). This means access to the latest API features — but also means breaking changes with every quarterly update, making ongoing maintenance a permanent obligation.

June 2026: Toward a Framework-Agnostic Toolkit

The most recent major development came with a developer preview announced on June 17, 2026. Shopify partnered with Vercel to redefine Hydrogen as a "toolkit rather than a framework". The headline keywords are framework-agnostic, runtime-agnostic, and built for agents (AI).

Concretely, the changes being signaled include:

No longer tied to one framework: Implementation examples are planned for multiple frameworks — Next.js, SvelteKit, Nuxt, Astro, SolidStart, React Router — covering non-React as well as React environments.
Runs anywhere: In Shopify's own words, "if you can call fetch, Hydrogen will run there." Oxygen, Vercel, Cloudflare Workers, Node, and Deno are all targets.
Toolkit-form delivery: Typed Storefront API client, cart primitives, product and collection helpers, price formatting, Shop Pay, analytics with consent management, request handlers, standard events and actions, and agent-facing skills.

Vercel Joins as an Open-Source Design Partner (Vercel Ship 26)

Shopify VP of Product Vanessa Lee on stage at Vercel Ship 26 in New York, alongside Vercel Chief Product Officer Tom Occhino

Shopify VP of Product Vanessa Lee on stage at Vercel Ship 26 in New York, with Vercel Chief Product Officer Tom Occhino. Source: Vercel.

The partnership took concrete shape two weeks later. At Vercel Ship 26 in New York on June 30, 2026 — in a fireside chat titled "Building Agentic Storefronts" featuring Shopify VP of Product Vanessa Lee and Vercel CPO Tom Occhino — Vercel announced it is working with Shopify to rebuild Hydrogen from the ground up as an open-source project, framing it as "a shared bet on a more open web." The rebuilt Hydrogen lives on a public GitHub preview branch and is runtime-agnostic — in Vercel's words, it "can run anywhere JavaScript does," with Svelte, Nuxt, and Next.js explicitly named alongside "bring your own custom framework."

The problem statement is blunt: "Hydrogen made headless storefronts easy to ship, but not portable." The original version tied you to a specific framework and runtime; the rebuild is meant to remove that lock-in. Architecturally, the new Hydrogen is organized into three layers:

Core — shared JavaScript utilities for the Shopify API that every project used to rewrite by hand (for example, a formatMoney helper that adapts Shopify's MoneyV2 type to the standard Intl.NumberFormat). This "glue code" now lives in one place.
Client — state and UI logic such as cart operations and form handling, provided as reusable imports instead of a bespoke implementation per project (available for React on the preview branch).
Server — full-stack integration that leans on each framework's native capabilities (caching, revalidation) rather than a proprietary runtime. Notably, this layer is delivered largely as documentation, templates, and skills rather than new code — the framework does less, and you lean on your own framework's primitives.

That the design partner is Vercel — the company behind Next.js and a major frontend hosting platform — is itself telling: it signals that Hydrogen's commerce core is being deliberately decoupled from Shopify's own Oxygen runtime and opened up to the broader JavaScript ecosystem.

It's worth being precise about what's actually new here. Using the Storefront API and @shopify/hydrogen-react to build storefronts on arbitrary React frameworks — including Next.js — was already possible before this announcement. In fact, Vercel's own Next.js Commerce template had long used Shopify as its default backend, and Hydrogen was already self-hostable on Vercel (and Netlify, Fly.io, Cloudflare Workers) per Shopify's own docs — so beneath the competitive framing, the two stacks had been interoperable all along; the real friction was Hydrogen's runtime coupling to Oxygen, not raw compatibility. The genuine novelty is twofold: first, the expansion to non-React frameworks like SvelteKit and Nuxt; second, making Hydrogen runtime-agnostic so that the tight coupling of "Hydrogen = Oxygen" is loosened.

That said, context is essential: this is a developer preview, not a production-ready release. Shopify explicitly states that "APIs will change," "more framework bindings are coming," and "existing Hydrogen continues to work." The current production path remains React Router–based Hydrogen. The preview also notes that CLI-based deployment to Oxygen is not yet ready. Reported timelines put a public beta in Q3 2026 and general availability around Q1 2027, and the preview ships React first — so the framework-agnostic, multi-framework promise (Svelte, Nuxt, custom) is, for now, announced direction more than shipped reality.

How to Read the Direction from Here

Looking at the history as a whole, a consistent thread of decoupling runs through Hydrogen's evolution:

Decoupling from a specific framework: Custom RSC → Remix → React Router 7 → framework-agnostic toolkit.
Decoupling from a specific runtime: Oxygen-only → "runs anywhere fetch is available."
Designing for AI agents: Agent-facing skills are included in the toolkit, signaling a structural preference for AI-operable interfaces.

The trajectory is moving from a fixed combination of "React Router on Oxygen" toward "Hydrogen's commerce core × any framework × any runtime" as a freely composable stack.

The cautionary note, though, is the pace of change itself. In roughly five years, Hydrogen has revisited its foundational architecture multiple times, and each shift has brought some degree of migration burden. The latest direction is compelling — but adopting preview-stage features early has historically introduced risk. For long-term operation, the more durable posture is to track the roadmap carefully and adopt stable releases on a deliberate timeline.

Summary

Hydrogen's history is a reflection of Shopify's willingness to absorb the frontier of frontend technology and act on it decisively. From the custom RSC bet, through the Remix acquisition and rebuild, through the React Router 7 migration, and now toward framework-agnostic tooling — the trajectory is consistent even as the specific choices change. The practical question for any team evaluating Hydrogen is no longer "should we adopt it?" but "when, and on which stable release, does adoption make sense for us?"

References

Information in this article reflects the state as of July 2026. Features in developer preview are subject to change.