<a href="https://hydrogen.shopify.dev"><img src="https://github.com/Shopify/hydrogen-v1/raw/1.6.1/github/images/hydrogen-logo.svg" alt="Hydrogen Logo"/></a>
<a href="https://www.npmjs.com/package/@shopify/hydrogen"><img src="https://img.shields.io/npm/v/@shopify/hydrogen.svg?sanitize=true" alt="Version"></a>
<a href="https://github.com/Shopify/hydrogen/blob/main/LICENSE.md"><img src="https://img.shields.io/npm/l/@shopify/hydrogen.svg?sanitize=true" alt="License"></a>
<a href="https://npmcharts.com/compare/@shopify/hydrogen?minimal=true"><img src="https://img.shields.io/npm/dm/@shopify/hydrogen.svg?sanitize=true" alt="Downloads"></a>
📚 Docs | 🗣 Discord | 💬 Discussions | 📝 Changelog | 😎 Awesome Hydrogen
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 ⬇️
Requirements:
yarn or npmInstallation:
# Using `yarn`
yarn create @shopify/hydrogen
# Using `npm`
npm init @shopify/hydrogen
# Using `npx`
npx @shopify/create-hydrogen
Running locally:
# Using `yarn`
yarn install
yarn dev
# Using `npm`
npm i
npm run dev
Learn more about getting started with Hydrogen.
Awesome Hydrogen - A curated list of awesome Hydrogen things.
👷♀️ Add npm packages to your project:
$ claude mcp add hydrogen-v1 \
-- python -m otcore.mcp_server <graph>