Shopify Hydrogen Developer Preview: Any JavaScript Framework

The Shopify Hydrogen developer preview is the next version of Hydrogen, and it is no longer a React Router framework. It is an SDK with commerce primitives and agent skills that works in any JavaScript framework and runtime. This guide covers what changes against current Hydrogen, how to try it, what the July 30 update added, and our view on when it makes sense to look at it. Checked against Shopify’s documentation and release notes in October 2026.

Current Hydrogen vs the Preview

Shopify’s developer preview documentation keeps the same commerce primitives but removes the tie to React Router. Here is the comparison it gives.

• What it is: current Hydrogen is a framework. The preview is an SDK plus agent skills.
• Framework: current Hydrogen uses React Router. The preview works with any JavaScript framework.
• Runtime: current Hydrogen runs on Oxygen or Node. The preview runs on any JavaScript runtime.
• Setup: npm create @shopify/hydrogen@latest for current Hydrogen, and npx @shopify/hydrogen@preview setup for the preview.

Shopify says to use current Hydrogen for its fully supported React Router path, and the preview to build with the primitives in another framework. If you read our Hydrogen vs Liquid comparison, note that its description of Hydrogen as tied to React Router still describes the supported version.

What the Hydrogen Developer Preview Includes

• A typed Storefront API client.
• Cart, product and collection primitives, and money formatting.
• First-party analytics with consent handling, and Shop Pay buttons.
• Request handlers that proxy the Storefront API, cart and redirects.
• Support for Shopify’s standard storefront events and actions.
• Predictive search, and customer accounts with login, profile and order history.

The commerce logic is plain JavaScript. Framework bindings are a thin layer on top, with React and Vue bindings today and the core primitives for other frameworks such as SvelteKit and SolidStart.

Try the Shopify Hydrogen Developer Preview

You need a server-rendered JavaScript storefront, Node.js, and Storefront API access from the Headless channel. Create a project in your framework, then run the setup command.

npx create-next-app@latest my-store
cd my-store
npx @shopify/hydrogen@preview setup

The command installs the preview package and copies Shopify’s agent skills into your project’s skills folder. You then ask your coding agent to set up the store. Add your credentials to the environment, keeping the private token on the server.

PUBLIC_STORE_DOMAIN="your-shop.myshopify.com"
PUBLIC_STOREFRONT_API_TOKEN="..."   # public token, safe for the browser
PRIVATE_STOREFRONT_API_TOKEN="..."  # private token, server-only, never expose

Queries run through a request-scoped client with typed gql() documents, so results come back typed against the Storefront API schema.

const storefront = createStorefrontClient({
  type: 'private',
  requestContext,
  config: {
    storeDomain: process.env.PUBLIC_STORE_DOMAIN,
    privateStorefrontToken: process.env.PRIVATE_STOREFRONT_API_TOKEN,
    buyerIp,
  },
});

const {data} = await storefront.graphql(
  gql(`query Home { products(first: 3) { nodes { handle title } } }`),
);

Agent Skills

The preview ships skills, which are focused instructions that teach a coding agent how to build each part of a storefront. They cover setup, the Storefront client, request handlers, routing, cart UI and drawer, collection browsing, predictive search, product variants, images, money, Shop Pay, markets, customer accounts, analytics, Oxygen compatibility and smoke tests. They are part of the package, so they stay aligned with the version you install.

What the July 30 Update Added

Shopify’s July 30 release notes list several changes.

• Vue bindings: a new @shopify/hydrogen/vue entrypoint that mirrors the React API with providers and composables for cart, products, collections and search. Vue 3.5 or later is an optional peer dependency.
• GraphQL tooling: query autocomplete and type checking for both Shopify APIs now ship with the package, through a TypeScript plugin.
• Shopify Inbox support: shoppers can chat with the store’s AI agent and be handed to staff.
• Analytics and consent: set up with the rest of your Shopify scripts. The analytics config now asks for an explicit channel, either hydrogen or headless.

The same notes list removals, including createStorefrontAnalytics() and Shopify.customerPrivacy.shouldShowGDPRBanner(). That is the part to read closely if you started on an earlier preview build.

Our Analysis: Who Should Look at This Now

Do not ship production on it. It is a developer preview, and the July notes remove APIs between builds. Use it for a prototype and keep client stores on current Hydrogen or a theme.

The real news is framework choice. Teams that already run Next.js or Nuxt, and want Shopify as the commerce backend, no longer have to adopt a separate React Router app. That lowers the cost of the headless decision, though it does not remove the ongoing work of owning caching, performance and upgrades.

Agent skills are a bet. The setup path assumes a coding agent does much of the wiring. Review what it generates, especially cart handling, the request handlers and anything touching tokens.

Headless still has to earn its cost. Nothing in the preview changes the core advice that a well-built Liquid theme is the right default. If your changes are mostly layout, content and app installs, stay on Liquid and test the new block and partial tags instead.

Plan analytics early. A custom storefront wires its own tracking, as we cover in Shopify Server-Side Tracking. The preview’s first-party analytics with consent handling is a good first thing to test.

Update, October 2026: Shopify says you can deploy Hydrogen storefronts to Oxygen from development stores and, since August 25, from trial plan stores. Trial plan stores do not include public environments, so deployment URLs always require a store login.

FAQ about the Shopify Hydrogen Developer Preview

Does the new Hydrogen run on Next.js? The developer preview does. Shopify provides a Next.js starter and setup path. Current Hydrogen is still built around React Router.

Do I still need Oxygen? No. The preview targets any JavaScript runtime, and a skill covers making a storefront Oxygen-compatible if you want Shopify’s hosting.

Is it replacing current Hydrogen? Shopify has not said so in the documentation we reviewed. It calls current Hydrogen the fully supported path and the preview the next version, so check the docs before planning a migration.

Related: WebMCP tools are also available on the Hydrogen developer preview. See Shopify WebMCP Tools.