--- title: Hydrogen 2026-10 is now available - Shopify developer blog description: >- The new Hydrogen is now GA: A framework-agnostic JavaScript library to add Shopify commerce to your existing stack, plus skills for coding agents and starters for React Router and Next.js. source_url: html: 'https://shopify.dev/changelog/blog/hydrogen-2026-10-is-now-available' md: 'https://shopify.dev/changelog/blog/hydrogen-2026-10-is-now-available.md' metadata: effectiveApiVersion: 2026-10 affectedApi: - displayName: Hydrogen handle: hydrogen primaryTag: displayName: API handle: api secondaryTag: displayName: New handle: new indicatesActionRequired: false createdAt: '2026-10-13T22:02:26-04:00' postedAt: '2026-10-14T11:00:00-04:00' updatedAt: '2026-10-14T11:44:25-04:00' effectiveAt: '2026-10-14T12:00:00-04:00' --- October 14, 2026 # Hydrogen 2026-10 is now available The new Hydrogen is now GA: A framework-agnostic JavaScript library to add Shopify commerce to your existing stack, plus skills for coding agents and starters for React Router and Next.js. DateOctober 14, 2026 Version[2026-10](https://shopify.dev/changelog?api_version=2026-10) FlagsNew SurfacesAPI Affected APIs[Hydrogen](https://shopify.dev/changelog?api_type=hydrogen) The new Hydrogen is generally available today. Since the developer preview started in June, we've shipped seven releases based on feedback from developers using it. The big deal about the new Hydrogen is that it isn't a big deal: Hydrogen now works with any JavaScript framework. You can bring Shopify's commerce to your stack just by adding the library to your app, instead of needing to replatform. Hydrogen then handles commerce for you: the cart, variant selection, prices in the buyer's currency, analytics that respect consent, Shop Pay, and customer login. React Router and Next.js have starters ready to deploy, and you can host it anywhere, including Oxygen, which is still free. The package also includes skills that teach coding agents how to use it. To try it in an existing project, run `npx @shopify/hydrogen@latest setup` and ask your agent to "Set up my store with Shopify." ## What Hydrogen gives you Every Shopify storefront needs the same commerce pieces, and they're harder to get right than they look. The cart has to stay correct when a shopper taps "Add to cart" twice. Prices have to match the buyer's country and currency. Analytics have to respect consent and still reach Shopify, or your reports go quiet. Hydrogen handles those for you: the cart, product variants, collection filters, predictive search, Markets, analytics, Shop Pay, and customer accounts. Your framework keeps routing, data loading, and rendering, and the design is all yours. The glue code fits in a few lines. For instance, a dynamically updating cart count in React looks like this: ```tsx import { createCartComponents } from "@shopify/hydrogen/react"; const { CartProvider, useCart } = createCartComponents(); function CartCount() { const count = useCart((cart) => cart.data.totalQuantity); return {count}; } ``` Vue has the same thing as a composable, and other frameworks subscribe to the cart directly. ## Built for coding agents Hydrogen comes with 20 skills that teach coding agents how to use it, covering each part of a storefront. We wrote them by building storefronts with agents and fixing the skill every time an agent got something wrong. Ask your agent to "Set up my store with Shopify," and it builds the home, collection, search, product, cart, and account pages, adds analytics, and smoke-tests the result. The skills live in your project and match the version of Hydrogen you installed, so your agent follows instructions for the code you actually have. After you upgrade Hydrogen versions, you can update the skills with `npx @shopify/hydrogen skills sync`. Hydrogen storefronts also work with shopping agents. In browsers that support WebMCP, an agent can search your catalog and update the cart, and after the buyer confirms, Shopify Checkout can submit the order with `complete_checkout`. You don't have to build anything for it. Hydrogen uses the same [standard storefront actions](https://shopify.dev/docs/api/storefront-events-and-actions) as Liquid themes, so compatible apps, storefront UI, *and agents* can share the same cart contract. An app or agent adds to the cart by calling the same action your own UI uses: ```ts await window.Shopify.actions.updateCart({ lines: [{ merchandiseId: "gid://shopify/ProductVariant/123", quantity: 1 }], }); ``` ## If you've used Hydrogen before Hydrogen used to be a framework built on React Router. To use its cart or analytics, you built your whole storefront on it. Now it's a library, so you can add it to the framework you already use and host it wherever you want. Oxygen is still free. Existing Hydrogen storefronts keep working as they do now, and there's nothing you need to do today. When you're ready to move, the [migration skill](https://github.com/Shopify/hydrogen/tree/main/packages/hydrogen/skills/migrate-to-hydrogen-2026-10) walks your agent through it. You keep your pages and routes and swap where the commerce code comes from. ## Get started There are a few ways to get started: * Run `npx @shopify/hydrogen@latest setup` in your own project. * Deploy the React Router template to Oxygen from your Shopify admin. * If you use Next.js, clone [Vercel Shop](https://github.com/vercel/shop), a storefront built on Hydrogen and maintained by Vercel. If something's missing or broken, tell us in the [Shopify developer community](https://community.shopify.dev). The code is on [GitHub](https://github.com/Shopify/hydrogen), and the docs are on [shopify.dev](https://shopify.dev/docs/storefronts/hydrogen). ## Related resources [GitHub](https://github.com/Shopify/hydrogen/) [Explore the code](https://github.com/Shopify/hydrogen/) [Docs](https://shopify.dev/docs/storefronts/hydrogen) [Read the developer documentation](https://shopify.dev/docs/storefronts/hydrogen) [Learn more](https://hydrogen.shopify.dev/) [Visit the Hydrogen website to learn more](https://hydrogen.shopify.dev/)