Legacy Hydrogen
The Hydrogen and Oxygen docs in this section cover Hydrogen versions 2026-04 and earlier. In those versions, Hydrogen is a full-stack framework built on Remix or React Router, with its own components, project structure, and CLI workflow.
Info
We recommend that you migrate to the latest version of Hydrogen. To learn how, refer to Migrate to the latest version of Hydrogen.
Info:
We recommend that you migrate to the latest version of Hydrogen. To learn how, refer to Migrate to the latest version of Hydrogen.
Anchor to Why migrateWhy migrate
Starting with version 2026-10, Hydrogen is a toolkit that you add to your framework, instead of a framework of its own:
- Use the framework you want: Hydrogen works with Next.js, React Router, and other frameworks, with bindings for React and Vue. Earlier versions are built on Remix or React Router.
- Deploy: Your framework determines where you can deploy a Hydrogen storefront.
- Own your UI: Hydrogen doesn't ship a component library. You build pages with your own components and design system, and Hydrogen handles the cart, variant selection, analytics, and other commerce logic.
- Get Shopify's routes for free: Request handlers restore the routes that a Shopify storefront needs, including checkout, cart permalinks, redirects, and agent endpoints.
Anchor to What changesWhat changes
| Area | Hydrogen 2026-04 and earlier | Hydrogen 2026-10 |
|---|---|---|
| Framework | Remix or React Router | Next.js, React Router, or another framework |
| UI | Hydrogen components, such as Image and Money | Your own components, with helpers such as formatMoney() |
| State | React hooks and loaders | Observable stores, with React and Vue bindings |
| Hosting | Oxygen, or self-hosted with an adapter | Your framework's supported hosts |
Anchor to Next stepsNext steps
Was this page helpful?