React-based framework for building dynamic, Shopify-powered custom storefronts.

📚 Docs | 🗣 Discord | 💬 Discussions | 📝 Changelog

Hydrogen is a React-based framework for building dynamic, Shopify-powered custom storefronts.

Spin up a Hydrogen app in your browser with our playground or set up your local environment with the instructions below ⬇️

This is a developer preview of Hydrogen. The documentation will be updated as Shopify introduces new features and refines existing functionality. Production launches of Hydrogen custom storefronts aren't yet supported as Shopify is evolving the Hydrogen framework.

Getting Started

Requirements:

• yarn or npm
• Node.js version 14.0 or higher

Installation:

# Using `yarn`
yarn create hydrogen-app

# Using `npm`
npm init hydrogen-app@latest

# Using `npx`
npx create-hydrogen-app

Running locally:

1. Start a development server

# Using `yarn`
yarn install
yarn dev

# Using `npm`
npm i --legacy-peer-deps
npm run dev

2. Visit the development environment running at http://localhost:3000.

Learn more about getting started with Hydrogen.

Contributing to Hydrogen

Read our contributing guide

Other handy links

🎁 Give us the gift of feedback.

📍 Check out Hydrogen examples on Github.

🤩 Learn more about Hydrogen.

👷‍♀️ Add npm packages to your project:

• @shopify/hydrogen
• @shopify/hydrogen-cli
• @shopify/hydrogen-plugin-sanity
• create-hydrogen-app
• eslint-plugin-hydrogen