Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shopify/hydrogen
Hydrogen lets you build faster headless storefronts in less time, on Shopify.
https://github.com/shopify/hydrogen
hydrogen react remix shopify
Last synced: 1 day ago
JSON representation
Hydrogen lets you build faster headless storefronts in less time, on Shopify.
- Host: GitHub
- URL: https://github.com/shopify/hydrogen
- Owner: Shopify
- License: mit
- Created: 2022-09-19T19:28:49.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-12T23:16:02.000Z (9 days ago)
- Last Synced: 2025-02-13T04:01:41.454Z (8 days ago)
- Topics: hydrogen, react, remix, shopify
- Language: TypeScript
- Homepage: https://hydrogen.shop
- Size: 65.2 MB
- Stars: 1,537
- Watchers: 173
- Forks: 292
- Open Issues: 116
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](LICENSE.md)
[](https://npmcharts.com/compare/@shopify/hydrogen?minimal=true)
📚 [Docs](https://shopify.dev/custom-storefronts/hydrogen) | 💬 [Discussions](https://github.com/Shopify/hydrogen/discussions) | 📝 [Changelog](./packages/hydrogen/CHANGELOG.md)
Hydrogen is Shopify’s stack for headless commerce. It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications. Hydrogen is designed to dovetail with [Remix](https://remix.run/), Shopify’s full stack web framework, but it also provides a React library portable to other supporting frameworks.
## Hydrogen Legacy v1
Hydrogen legacy v1 has been moved [to a separate repo](https://github.com/Shopify/hydrogen-v1) and the [docs can be found here](https://shopify.github.io/hydrogen-v1/tutorials/getting-started).
## Getting started with Hydrogen
**Requirements:**
- Node.js version 18.0.0 or higher
- `npm` (or your package manager of choice, such as `yarn` or `pnpm`)
1. Install the latest version of Hydrogen:
```bash
npm create @shopify/hydrogen@latest
```
1. Run the local development server:
```bash
npm install
npm run dev
```
1. Open your new Hydrogen app running at .
See the complete [Hydrogen docs](https://shopify.dev/custom-storefronts/hydrogen).
## Packages in this repo
Hydrogen is organized as a [monorepo](https://monorepo.tools/), which includes multiple packages that can be used together.
| Package | Latest version | Description | Readme |
| ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| [`@shopify/hydrogen`](/packages/hydrogen/) | [](https://www.npmjs.com/package/@shopify/hydrogen) | Opinionated tools, utilities, and best-in-class examples for building a commerce application with Remix. | [Readme](/packages/hydrogen#readme) |
| [`@shopify/hydrogen-react`](/packages/hydrogen-react/) | [](https://www.npmjs.com/package/@shopify/hydrogen-react) | Unopionated and performant library of Shopify-specific commerce components, hooks, and utilities. | [Readme](/packages/hydrogen-react#readme) |
| [`@shopify/cli-hydrogen`](/packages/cli/) | [](https://www.npmjs.com/package/@shopify/cli-hydrogen) | Hydrogen extension for [Shopify CLI](https://shopify.dev/docs/custom-storefronts/hydrogen/cli). | [Readme](/packages/cli#readme) |
| [`@shopify/create-hydrogen`](/packages/create-hydrogen/) | [](https://www.npmjs.com/package/@shopify/create-hydrogen) | Generate a new Hydrogen project from the command line. | [Readme](/packages/create-hydrogen#readme) |
| [`@shopify/hydrogen-codegen`](/packages/hydrogen-codegen/) | [](https://www.npmjs.com/package/@shopify/hydrogen-codegen) | Generate types for Storefront API queries automatically. | [Readme](/packages/hydrogen-codegen#readme) |
| [`@shopify/remix-oxygen`](/packages/remix-oxygen/) | [](https://www.npmjs.com/package/@shopify/remix-oxygen) | Remix adapter enabling Hydrogen to run on the [Oxygen](https://shopify.dev/custom-storefronts/oxygen) runtime. | [Readme](/packages/remix-oxygen#readme) |
| [`@shopify/mini-oxygen`](/packages/mini-oxygen/) | [](https://www.npmjs.com/package/@shopify/mini-oxygen) | A local runtime for Hydrogen apps that simulates the Oxygen production environment. | [Readme](/packages/mini-oxygen#readme) |
## Versioning
Hydrogen and hydrogen-react are tied to specific versions of the [Shopify Storefront API](https://shopify.dev/api/storefront), which follows [calver](https://calver.org/).
For example, if you're using Storefront API version `2023-01`, then Hydrogen and hydrogen-react versions `2022.1.x` are fully compatible.
If the Storefront API version update includes breaking changes, then Hydrogen and hydrogen-react may also include breaking changes. Because the API version is updated every three months, breaking changes could occur every three months.
Learn more about API [release schedules](https://shopify.dev/api/usage/versioning#release-schedule) at Shopify.
## Contributing to Hydrogen
[Read our contributing guide](CONTRIBUTING.md)
## Other handy links
[Learn more about Hydrogen](https://shopify.dev/hydrogen).