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 storefront replacement for Magento 2 (PWA), that delivers a faster, better user experience. Fully customizable (React, Next.js) and open-source.

Built for Adobe Commerce, headless

Complete and production ready for Magento

GraphCommerce® features components for all key Magento functionality. The components are built on the default Magento 2 GraphQL API and page independent: you can theme, modify and move them around with ease.

Every project a head start

Plug-and-play PWA for Magento 2

GraphCommerce® is built for developers and agencies with the highest quality demands. It offers all the features you need to build a killer Magento PWA .

App features

App experience

GraphCommerce® is designed and built as an app. Pages (filterable category pages, product page, my account) render instantly. The advanced App shell, floating navigation, smart back button all contribute to a great user experience.

Jumpstart

Highly customizable

GraphCommerce® is a Magento PWA storefront. It offers production-quality default components for drawer interfaces, search, shopping cart, checkout and more. You an use everything, or just the parts you need.

Content pages

Rich content pages

Tell your brand’s story with rich content product pages and category landing pages. You can easily put pages together using content components, which you can add to any page directly from the CMS.

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

Every shop built with GraphCommerce® can be effortlessly optimized for SEO, featuring best practices for canonicals, schema.org, meta data, sitemap.xml and more.

PWA

Progressive Web App

Be amongst the first to qualify as a PWA, Google’s newly set (ranking) standard for bringing an app-like experience to the web. GraphCommerce® is a production ready PWA for Magento.

Headless Magento Composable Commerce

Fetch data from multiple services

At the heart of GraphCommerce® is GraphQL Mesh, which fetches and consolidates data from different services (Magento Open Source, Adobe Commerce, GraphCMS and Formium). Add the services you need for true composable commerce.

query {
  # Fetch from Magento
  products(search: "sock", pageSize: 3) {
    items {
      url_key
      }
  }
  # ...and GraphCMS
  pages(last: 3) {
    title
  }
}

Integrated services that can be queried with a single call

MagentoAdobe CommerceGraphCMSFormium
Performance first

Unparalleled Magento shopping experience

GraphCommerce® has been designed and built as a progressive web app (PWA). It is optimized for Google’s Core Web Vitals, scoring great on all metrics: LCP, FID and CLS. With Next.js and React under active development, GraphCommerce® is set to become even better and faster.

Static image of Magento PWA loading

Website

00:00

PWA

00:00

Hybrid Static Site Generation (SSG)

Page-based Javascript bundling and splitting

Advanced CDN caching for static assets and pages

Image and font rendering and download optimization

Minimal required data fetching (no over fetching)

Predictive url pefetching and caching

Critical path CSS rendering

Long-term browser caching, even between builds

Brand Experience

Add rich content pages to your Magento PWA using the integrated CMS

GraphCMS (a headless CMS integrated by default), is used for storing static content. Pages can be composed directly in the admin interface, without the help of a developer. A variety of content components offer creative ways to display text, video and images.

Happy teams

High efficiency PWA Magento 2 development

Building projects with GraphCommerce® offers benefits that make shop and product owners, designers, marketeers and management very happy.

CEO

Consolidate your resources

GraphCommerce® offers a native-app user and developer experience. It replaces the need for a native app, cutting costs.

CFO

Serverless architecture

The GraphCommerce® Magento PWA is a standalone app. You deploy it on top of (zero config) serverless hosting platform Vercel.

PO

Every feature a testable URL

Every git branch is deployed on a unique URL. You can preview and test features while building.

DEV

API first

GraphCommerce® allows for API-first development. Every front-end feature can be built with mockup API data. Front-end developers are no longer dependent on back-end. with mockup API data. Front-end developers are no longer dependent on back-end.

Design

Designers, be free

E-commerce has a way of forcing very recognizable design choices. With GraphCommerce®, designers have complete freedom in creating the ultimate user experience.

CEO

No vendor lock-in

GraphCommerce® is built with open-source industry standard technology. All the commercial back-end services that have been implemented offer a free plan to set up shop with ease.

Want to share the GraphCommerce® Magento 2 PWA demo with your team?

https://graphcommerce.vercel.app/
Developers, developers, developers

A framework with amazing developer experience

GraphCommerce® has been developed by developers, for developers. It is built with the best open-source frameworks and libraries for the modern web, used by millions, and subject to continuous innovation by the largest developer communities in the world.

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

    Realtime feedback in your IDE with typescript

  • ›_

    Fast refresh provides instant feedback during development

  • ›_

    Fully configured Webpack requires none of your time

  • ›_

    Validate your code on build time with Typescript to prevent failing builds

  • ›_

    Discover the GraphQL schema with GraphQL Playground

  • ›_

    Zero-maintenance hosting via Vercel

  • ›_

    Standardized advanced form handling

  • ›_

    Next.js file system routing

  • ›_

    Easily themable component library designed for e-commerce

  • ›_

    Declarative, 60fps animations using Framer Motion

  • ›_

    Auto-generated Typescript definitions from GraphQL schema queries

  • ›_

    Query multiple back-ends with Apollo Client and GraphQL Mesh

  • ›_

    Magento PWA out of the box with the included manifest

GraphCommerce® is built with the tools you already know and love

React PWA MagentoTypescript PWA Magento 2GraphQL Magento PWA Magento 2ApolloPWA Magento 2MaterialUI MuiFramer motion