# PWA Studio is a Magento storefront toolchain split into independent packages > PWA Studio is a collection of tools for building Progressive Web Applications on top of Magento 2, structured as a Yarn workspaces monorepo whose packages are published to npm one at a time, so a project can take the UPWARD server layer, the peregrine component logic or the venia visual components without installing the whole thing. The reference storefront is Venia, and the development environment runs in Docker with hot reloading. **magento/pwa-studio** — 🛠Development tools to build, optimize and deploy Progressive Web Applications for Magento 2. - Repository: https://github.com/magento/pwa-studio - Website: https://developer.adobe.com/commerce/pwa-studio/ - Stars: 1,083 · Forks: 678 - Language: JavaScript - License: OSL-3.0 - Published: 2026-10-19 · Updated: 2026-10-19 · Language: en - Canonical page: https://hysenlabs.com/projects/magento-pwa-studio ## A collection of tools, not a framework PWA Studio is described as a collection of tools that lets developers build complex Progressive Web Applications on top of Magento 2 stores, and the word collection is doing real work. This is not a single application you clone and edit. It is a set of packages that each solve one part of the problem, published to npm independently, with a reference implementation on top of them that shows how they fit together. The stated structure is a monorepo using Yarn Workspaces, put in place to facilitate local development, testing and versioning, and the packages in it are independently published to NPM, with the README being explicit that you should install individual packages as needed instead of installing the entire pwa-studio project as a dependency of your project. That is a deliberate constraint on how the project wants to be used, and it also means the packages have to be designed to work without the rest of the monorepo around them, which is a stricter test than a normal library. ## The packages, and what each one is for The package list is the map of the stack. peregrine is a component library for adding logic to visual components, which is the separation that lets a team have its own design system while keeping the behaviour, the routing and the data handling that a storefront needs. venia-ui is the library of visual components for PWA storefront projects, and venia-concept is a concept storefront project built using the tools, which is the reference application. pwa-buildpack is a tooling library to help with PWA storefront development. babel-preset-peregrine is a Babel preset that is required to use peregrine components, which is a small but important detail, because it means the peregrine components are compiled in a specific way and that configuration is not optional. graphql-cli-validate-magento-pwa-queries is a script to validate your project's GraphQL queries against a schema, which is the guard against shipping a query that the backend cannot answer. upward-spec and upward-js are the server layer, described next. And pwa-devdocs is the project source for the documentation site, which means the documentation lives in the repository and is versioned with it. ## UPWARD, the part that is not just a React app Two packages carry the idea that makes PWA Studio more than a component library. upward-spec is the UPWARD specification and its test suite, and upward-js is a reference implementation of that specification. A specification with a test suite and a reference implementation is a serious commitment, because it means the behaviour of the server layer is defined in a way that another implementation, in another language, could match. That matters for a storefront, because the part that is hard is the join between a Magento backend and a static frontend: which requests go to the Magento GraphQL API, which files are served from the build output, how the two are addressed on one origin, and what happens to a request that matches neither. Putting that in a specification rather than in a configuration file is what allows a deployment to run the same store on different infrastructure. The audience for this is a team that has decided the storefront should be a PWA and wants the server behaviour pinned down rather than rediscovered per project. ## Yarn workspaces, and the one command that will not work The monorepo decision has a consequence that the README spells out. If you are installing the whole PWA Studio monorepo, the project uses yarn workspaces and does not support npm install, and you should use yarn install instead. The workspaces are declared in the root package.json, which lists packages/babel-preset-peregrine, packages/create-pwa, the extensions under packages/extensions/*, packages/pagebuilder, packages/peregrine, packages/pwa-buildpack, packages/pwa-theme-venia, packages/upward-js, packages/upward-spec, packages/venia-concept and packages/venia-ui. The repository also has lerna.json alongside, and the scripts show the shape of the workflow, with yarn venia run build for a storefront build, yarn venia start to stage it, a jest test script, an eslint script scoped to packages, venia-integration-tests and scripts, a coveralls script that pipes the coverage file, and a prepare script that runs scripts/monorepo-introduction.js. There is also a magento-compatibility.js file at the root, which exists so a project can check which Magento versions the tooling expects. ## Venia, and the design kit for it Venia is a Magento PWA storefront created and powered by PWA Studio tools and libraries, and the README says developers can use it as a reference storefront for their own projects or as a starting point for customization. The distinction matters. A reference implementation is something you read to understand how the pieces fit, and a starting point is something you fork and own, and Venia is deliberately both, which means the fastest way to evaluate the stack is to run it and look at the result rather than to read the documentation. The other half of the design story is the PWA Studio XD Kit, which contains a collection of templates and components compatible with Adobe Commerce, and the stated purpose is that Adobe XD makes handoff between designers and engineers more efficient through collaboration tools. A component library that ships design templates is a different proposition from one that ships only code, because the handoff is where storefront work usually goes wrong. ## The development environment runs in Docker There is a devcontainer, a dev.dockerfile and a prod.dockerfile, and a docker-compose.yml that shows how the local environment is put together. The compose file has two services. The nginx-proxy service uses the jwilder/nginx-proxy image, publishes the DEV_SERVER_PORT on 443, mounts the local certificates directory into the container and the docker socket read-only, and it exists so that the PWA container is reachable over HTTPS, since the reverse proxy connects the SSL and TLS certificates created on the local file system into the nginx container. The pwa service is built from the dev.dockerfile and volume mounts the working directories of peregrine, pwa-buildpack, upward-js, venia-concept and venia-ui into the container, with the comment explaining that changes made in the container and on the host file system are mapped to one another, which enables hot reloading from the container to detect changes made on the host file system. The venia-integration-tests/ directory at the root is the other half of the local story, since a storefront framework that cannot be tested against a real backend is a framework that will break on contact with one. ## The licence, the release line, and the community around it The licence is the Open Software License 3.0, with a LICENSE.txt and a separate LICENSE_AFL.txt in the repository, and the package.json says to see the license in LICENSE.txt, so this is copyleft with a commercial-use question attached, which is worth reading before you plan a deployment around it. The releases are versioned like the product, with 14.4.0 on 2025-10-16, 14.5.0 on 2026-02-12 and 14.5.1 on 2026-05-14, and the default branch is develop, with the coverage badge tracking that branch. The project is not archived and the last push was on 2026-10-19. The community structure is unusual and worth reading because it tells you who actually decides things. There is a community wiki for contributions, a community backlog board with a Ready for Development column to pick work from, named community maintainers approved by the Core Team as points of contact, a pwa slack channel, and a public calendar of team events. The table of top community contributors is the one stale artifact, since it is labelled as last updated on October 14, 2021, with commit counts and lines added and removed per author, which is a snapshot of a moment rather than a current measure. ## Conclusion PWA Studio is the right foundation when you are building a headless storefront against Magento 2 and want the parts of the stack that are hard to get right already solved, in particular the server layer that stitches a Magento backend to a static frontend, and the accessibility-minded component layer. It is the wrong tool if you are not on Magento, and it is a heavy choice if you only need a React storefront, because the dependency on Magento's GraphQL schema and its build tooling is the price of the integration. Before adopting it, read the compatibility notes, since the repository carries a magento-compatibility.js file for exactly that reason, plan for Yarn rather than npm because the monorepo does not support npm install, and check whether you need the full monorepo or only upward-js and peregrine, since the packages are published independently for that reason. ## FAQ ### What is PWA Studio and who is it for? It is a collection of tools that lets developers build complex Progressive Web Applications on top of Magento 2 stores. The audience is teams building a headless or PWA storefront against a Magento 2 backend, and the components come as separately published npm packages so a project can take only what it needs. ### Can I install PWA Studio with npm? Not if you are installing the whole monorepo. The README states that the project uses yarn workspaces and does not support npm install, and asks you to use yarn install instead. The individual published packages are available on npm as usual. ### What is UPWARD in PWA Studio? It is the server layer, in two packages. upward-spec is the UPWARD specification together with its test suite, and upward-js is a reference implementation of that specification, so the behaviour of the part that connects the Magento backend to the static frontend is defined rather than configured. ### What is Venia? Venia is a Magento PWA storefront created and powered by PWA Studio tools and libraries. The README describes it as a reference storefront for your own projects or as a starting point for customization, and there is also a PWA Studio XD Kit with templates and components compatible with Adobe Commerce. ## Sources - [License: OSL-3.0](https://github.com/magento/pwa-studio/blob/develop/LICENSE) - [magento/pwa-studio on GitHub](https://github.com/magento/pwa-studio) - [Project website](https://developer.adobe.com/commerce/pwa-studio/) - [README](https://github.com/magento/pwa-studio/blob/develop/README.md) - [Releases](https://github.com/magento/pwa-studio/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/magento-pwa-studio