Hydrogen and Oxygen project structure

Hydrogen and Oxygen make up Shopify's recommended stack for headless commerce. The different parts of the system work together to make it faster and easier to build and deploy headless Shopify stores.

  • Hydrogen: A set of components, utilities, and design patterns for working with with Shopify APIs.
  • Remix: The underlying framework that handles routing, data fetching, reactive UI, and styling.
  • Oxygen: Runs Hydrogen apps at the edge and handles rendering, caching, static assets, and event logging.

The following diagram is a simplified visualization of how the different parts of the Hydrogen and Oxygen stack work together:

Hydrogen is the top layer of the stack, handling components and utilities like API clients. Remix is the middle layer, handling routing and data loading. Oxygen is the bottom layer, handling the runtime, server-side rendering, CDN assets, and caching.