Hydrogen / Developer preview

Hydrogen developer preview
Next-generation Hydrogen that moves commerce internals "outside of React Router"

The next version of Hydrogen decouples commerce logic from React Router and moves it into a framework-agnostic core. You can build storefronts using Shopify's "commerce primitives" with any JavaScript framework, and it ships with skills that coding agents use to scaffold projects. It's still an early preview, and feedback is being collected.

On this page
  1. What actually changes (understand it in 30 seconds)
  2. Structure diagram: React Router coupling → core separation
  3. 3 highlights
  4. Current Hydrogen vs. the next version
  5. Current status (early preview)
  6. 5 points engineers should know
  7. 3 use cases you can apply to your work
  8. A one-line summary for pitches

1What actually changes

Hydrogen so far has been tightly coupled to React Router (the Remix family), a store framework.
The next versionmoves commerce logic outside of React Router into a "framework-agnostic core."As a result, you can build storefronts using Shopify's commerce features with any JavaScript framework you like, not just React Router.

Current: bound to React Router

Commerce logic is built into React Router. Using Hydrogen effectively means using React Router.

Next version: core separated out

Commerce logic is carved out into a standalone core that can be called as "commerce primitives" from any JS framework.

2Structure diagram: from coupling to core separation

Current: integrated React Router Commerce logic (built in) Routing / rendering Separation Next version: separated core Commerce Core framework-agnostic primitives React Router Other JS framework Yet another framework
"Commerce primitives"are: commerce operations such as cart, products, and checkout provided as building blocks that don't depend on any specific framework. The idea is that you assemble these from any JS framework to build a storefront.
* Specifics such as the API names and granularity of individual primitives arenot described.

33 highlights

① Separating the core

Move commerce logic outside of React Router and consolidate it into a framework-agnostic core.

② Build with any JS framework

Build a storefront with any JavaScript framework using Shopify's commerce primitives.

③ Bundled skills for agents

Skills are bundled so coding agents can automatically scaffold a storefront.

4Legacy Hydrogen vs. the next version

ItemLegacy HydrogenNext version (developer preview)
Where commerce logic lives Coupled Inside React Router Decoupled Framework-agnostic core
Usable frameworks React Router-centric Any JS framework
Delivery format Framework Commerce primitives (building blocks)
Agent support Not specified Bundled skills Auto-generated scaffolding
Availability status — Early preview Gathering feedback

5Current status (early preview)

An early developer preview

This is an "early developer preview," still being built out as development continues. Regarding production readiness and stability, the original article givesno details.

Gathering feedback

Shopify is seeking feedback from users. Details can be found on GitHub under "Hydrogen Developer Preview."

Specifics such as supported version numbers, release timing, migration steps, and the exact supported frameworks (what works besides React) arenot statedin the original article. Refer to the preview information on GitHub as the primary source for detailed specifications.

65 key points for engineers to keep in mind

1. Separation of concerns is the essence

A design change that separates "commerce logic" from the "rendering/routing framework." The framework becomes a choice, while commerce is fixed in the core.

2. The React Router assumption is removed

React Router, which had effectively been required, is moving toward being optional. You can still use it with React Router, but you can also choose other JS frameworks.

API ?

3. The concrete spec of the primitives hasn't been disclosed

The direction of "commerce primitives" was outlined, but the API names, granularity, and package structure aren't described in the original post. First-hand confirmation via the GitHub preview is needed.

4. Scaffolding agents with skills

The premise is that a coding agent uses skills to generate a storefront boilerplate. An agent-driven development flow is assumed.

5. Still an early preview = treat it as subject to change

It's an early preview and still under active development. The interface and structure may change going forward.Trial use for validation and feedback is more realistic than putting it into production. The original post doesn't state the stable-release timing or any backward-compatibility guarantees.

7Three use cases you can apply to your work

core
USE CASE 1

Build Shopify storefronts in-house even on teams with a non-React tech stack

Challenge
The internal frontend standard isn't React Router-based, which made adopting traditional Hydrogen difficult.
Approach
Use the commerce core and switch to building the storefront with the JS framework your team is strong in.
Impact
You can incorporate Shopify's commerce features while leveraging your existing skill set. Lower learning curve and adoption barrier.
Technical notes
The specific supported frameworks and their constraints aren't described in the original post. Verify a working setup with the GitHub preview.
skills scaffold complete
USE CASE 2

Speed up the initial build of a storefront with a coding agent

Challenge
When kicking off a new storefront project, boilerplate creation and routine setup take time.
Approach
Use the bundled skills to have a coding agent generate the storefront scaffold, then build out the details.
Impact
Less effort on the initial build. Engineers can focus on requirement-specific logic.
Technical notes
The specific steps for using skills and details on supported agents aren't described in the original post. Refer to the GitHub preview.
PoC
USE CASE 3

Pre-validate next-gen Hydrogen and submit feedback

Challenge
You don't want to scramble to catch up to architectural changes that could become the future standard only after release.
Approach
Try the early developer preview in an internal PoC, identify gaps for your own use cases, and send feedback back to Shopify.
Impact
Estimate migration costs early. If your requests are reflected, you can steer the spec toward what favors your team.
Technical notes
Since it's a preview, the interface may change. Treat it in an isolated environment for validation rather than production.

8A one-line summary you can use in proposals

"Next-gen Hydrogen decouples commerce logic from React Router andA framework-agnostic coreis the goal.
Use Shopify's commerce primitives with any JS framework, with agent skills that auto-generate scaffolding too.
For now, though, it's an early developer preview—meant for testing and feedback, so check the primary source on GitHub for the exact spec."