Skip to main content

GraphCommerce® - The headless Magento PWA storefront on React, Next.js | Product HuntGraphCommerce® - Github activity tracker

The future of e-commerce is now.

GraphCommerce® is a headless e-commerce frontend for Magento 2, that delivers a faster, better user experience. Fully customizable (React, Next.js) and open source.

Built for Magento (Open Source) and Adobe Commerce

Production-grade headless Adobe (Magento) Commerce storefront

GraphCommerce® is a self-hosted frontend similar to any typical React or Next.js app. It offers the full range of Magento’s features, and connects with Magento using the standard GraphQL API. GraphCommerce® is trusted by some of the biggest brands and agencies in the industry.

Accelerate your headless ecommerce projects

Plug-and-play headless e-commerce with React and Next.js

Designed for developers and agencies who demand top-tier quality, GraphCommerce® is equipped with all the features necessary for the development of state-of-the-art e-commerce experiences.

App features

App experience

GraphCommerce® is designed and built like an app. Pages (filterable category pages, product page, my account) render instantly. Features like the floating navigation and draggable overlays enhance the user experience.

Jumpstart

Highly customizable

Built with the best open source technologies, GraphCommerce® features easily customizable components for search, navigation, shopping cart, checkout, and account management, allowing for full adaptation to your unique needs.

Content pages

Integrated headless CMS

GraphCommerce® comes with a default integration of Hygraph, a headless CMS, enabling store owners to create visually attractive content pages using a diverse range of content components directly from the CMS's admin panel.

Optimized performance

Optimized performance

GraphCommerce® helps you score green Core Web Vitals with little to no effort, thanks to built-in features like static generation, bundled JS, viewport URL prefetching and more.

SEO

Search engine friendly

Optimize your store's SEO with minimal effort, thanks to default features such as canonicals, rewrites and redirects, schema.org, meta data, sitemap.xml.

PWA

Progressive Web App

Your store will meet Google's new standard for Progressive Web Apps (PWA), offering an app-like experience on the web. Users can save your store as a web app on their mobile phones or desktops.

Composable Commerce architecture made practical

One single endpoint for all 3rd party backend services

GraphCommerce® ships with GraphQL Mesh, a tool designed to aggregate data from different sources into one GraphQL endpoint. This includes data from Magento Open Source, HyGraph (the default integrated headless CMS), or any other system you aim to integrate.

query {
  # Fetch from Magento
  products(search: "sock", pageSize: 3) {
    items {
      url_key
      }
  }
  # ...and Hygraph
  pages(last: 3) {
    title
  }
}
Engineered with a performance-first approach

Unmatched, high-performance shopping experience

GraphCommerce® is engineered as a state-of-the-art web app (PWA), tailored to meet and exceed Google’s Core Web Vitals benchmarks. It demonstrates outstanding results in metrics such as LCP,FID, and CLS. GraphCommerce® is set to continuously evolve with Next.js and React, aiming for even better performance in the future.

Static image of Magento PWA loading

Website

00:00

Web app

00:00

Hybrid Static Site Generation (SSG)

Page-based JavaScript bundling and splitting

CDN compatibility (static assets and pages)

Image and font compression and download optimization

Minimal required data fetching (no overfetching)

Predictive URL prefetching and caching

Critical path CSS rendering

Persistent browser caching between builds

Self-manageable content with Hygraph

Craft rich content pages with Hygraph, the standard integrated headless CMS

A key feature of GraphCommerce® is its built-in HyGraph integration, a headless CMS connected through GraphQL Mesh. With this Content Management System, store owners can independently compose and build pages. Hygraph is part of GraphCommerce's composable commerce architecture and can therefore be removed or replaced.

A better development experience for all stakeholders

Simplify high-end e-commerce platform development with GraphCommerce®

Building projects with GraphCommerce provides benefits not only to developers, but also to store owners, designers, product owners, marketing, and management.

CFO

Cut app development expenses

GraphCommerce® offers a native-app-like user experience, eliminating the need for a native app and the associated development costs.

Devops

Serverless architecture

GraphCommerce® is based on Next.js and can be deployed on a serverless environment that requires no configuration or maintenance. You can opt for Vercel or a similar platform.

PO

A testable URL for every feature

When deployed to Vercel, each Git branch has its own distinct URL, allowing you to preview and test features during development.

DEV

Enables API-first development

GraphCommerce® facilitates API-first development, enabling the creation of front-end features using mock API data. This reduces the front-end developers' dependence on the progress of back-end development.

Design

Full creative control

Traditional e-commerce platforms tends to impose rigid design conventions, yet with GraphCommerce®, designers can unleash their creativity and shape the ultimate user experience.

CEO

An easy start, at 0 cost

GraphCommerce® is built upon open source industry-standard technology and all integrated 3rd party backend services come with a free plan, allowing you to start your project without any expenses.

Share the GraphCommerce® headless frontend demo with your team

graphcommerce.vercel.app
Developers, developers, developers

A framework offering an exceptional developer experience

Developed by and for developers, GraphCommerce® is built with the best open-source frameworks and libraries for the modern web. Used by millions, these tools are under continuous evolution by the biggest developer communities in the world.

Visual studio code screenshot building Magento PWA in GraphCommerce
  • ›_

    TypeScript integration for immediate feedback in your IDE.

  • ›_

    Fast Refresh for real-time development feedback.

  • ›_

    No-time-required, fully set up Webpack.

  • ›_

    TypeScript-based build-time code checks to prevent build failures.

  • ›_

    GraphQL schema exploration with GraphQL Playground.

  • ›_

    Zero-effort hosting via Vercel.

  • ›_

    Advanced, standardized form management.

  • ›_

    File system routing enabled by Next.js.

  • ›_

    E-commerce-focused, easily customizable component library.

  • ›_

    Smooth, 60fps animations with Framer Motion.

  • ›_

    Auto-generated TypeScript definitions from your GraphQL schema queries.

  • ›_

    Query multiple back-ends seamlessly with Apollo Client and GraphQL Mesh.

  • ›_

    Plug-and-play Magento PWA with the included manifest.

GraphCommerce® is built with the best-in-class open-source technologies

React PWA MagentoTypescriptGraphQLApolloNext.js headless ecommerceMuiFramer Motion