📚 [Docs](https://shopify.dev/custom-storefronts/hydrogen) | 🗣 [Discord](https://discord.gg/Hefq6w5c5d) | 💬 [Discussions](https://github.com/Shopify/hydrogen/discussions) | 📝 [Changelog](./packages/hydrogen/CHANGELOG.md)
Hydrogen is a **React-based framework** for building dynamic, **Shopify-powered** custom storefronts.
Spin up a Hydrogen app in your browser with our [playground](https://hydrogen.new/) 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](https://github.com/Shopify/hydrogen/releases). 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:**
```bash
# 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
```bash
# 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](https://shopify.dev/custom-storefronts/hydrogen/getting-started).
## Contributing to Hydrogen
[Read our contributing guide](./docs/contributing.md)
## Other handy links
🎁 Give us the gift of [feedback](https://www.surveymonkey.com/r/HydrogenFeedback).
📍 Check out [Hydrogen examples on Github](https://github.com/Shopify/hydrogen-examples).
🤩 [Learn more about Hydrogen](https://shopify.dev/hydrogen).
👷♀️ Add `npm` packages to your project:
- [`@shopify/hydrogen`](https://www.npmjs.com/package/@shopify/hydrogen)
- [`@shopify/hydrogen-cli`](https://www.npmjs.com/package/@shopify/hydrogen-cli)
- [`@shopify/hydrogen-plugin-sanity`](https://www.npmjs.com/package/@shopify/hydrogen-plugin-sanity)
- [`create-hydrogen-app`](https://www.npmjs.com/package/create-hydrogen-app)
- [`eslint-plugin-hydrogen`](https://www.npmjs.com/package/eslint-plugin-hydrogen)