Admin apps move to Remix

Shopify now recommends Remix as the framework for building Admin apps. The shift gives developers a modern toolchain that produces strong default performance without requiring deep tuning. Remix is built around web standards, so developers can apply knowledge they already have rather than learning a proprietary model.

What Remix changes for developers

Remix brings a server-first architecture to the Admin app ecosystem. Data loading happens on the server, which reduces the amount of JavaScript shipped to the browser and speeds up initial render times. Mutations follow the same pattern, with form actions handled server-side before the client receives an updated UI.

Key properties of the Remix approach:

  • Nested routes let each route define its own data dependencies, leading to parallel loading and less over-fetching.
  • Progressive enhancement is a first-class concern—apps can work without JavaScript and then layer on interactivity.
  • Error boundaries catch failures at the route level, so one broken section doesn't take down the whole page.

Developers new to Remix will find familiar patterns. The framework uses standard fetch, standard Request and Response objects, and regular HTML forms for mutations. That means less framework-specific vocabulary and more time spent on actual app logic.

Performance is a product feature

An Admin app's speed directly affects merchant productivity and satisfaction. Slow apps create friction in daily workflows, and merchants often abandon tools that feel sluggish. Remix's server-rendered output minimizes client-side work, which matters on lower-end devices and slower network connections that are common in areas where commerce is growing fastest.

The framework also handles cache control effectively. Responses can be cached at the edge or in the browser using standard HTTP headers, so repeated visits load quickly. Developers get these benefits by default, rather than having to implement complex caching strategies themselves.

Getting started with the shift

Existing Admin apps built with other frameworks are not left behind. The Remix-based app template includes migration guidance as it reaches general availability. Shopify provides a CLI that scaffolds new projects and handles authentication, Polaris UI integration, and deployment configuration out of the box.

For teams starting fresh, Remix is the path forward. The framework's emphasis on web standards reduces the learning curve, while its opinionated defaults enforce the performance and accessibility that merchants expect. Shopify's continued investment in Remix signals a commitment to building on the open web rather than a closed ecosystem.

Remix becomes the default for Shopify Admin apps

Shopify is making Remix the recommended framework for building Admin apps. The move is part of a broader effort to align Shopify’s developer platform with standard web practices, reducing the amount of Shopify-specific knowledge developers need before they can be productive.

Admin apps are web applications that Shopify Admin embeds through cross-origin <iframe> elements. This composition model gives merchants a single surface where multiple independent apps run side by side. The browser’s sandboxing keeps those apps isolated from each other and from the top-level page, but it also removes capabilities that web developers take for granted.

Browsers have tightened what iframes can do, largely in response to historical misuse for tracking. In Safari, for example, iframes cannot reliably set cookies or write to IndexedDB, LocalStorage, or SessionStorage. As a result, common web development patterns—URL management, storage, and user identification—behave differently inside an iframe. The only sanctioned channel through the browser’s isolation boundary is the postMessage() API.

What App Bridge did, and why it changed

Shopify’s answer has been App Bridge, a message-based protocol layered on top of postMessage(). It restores capabilities browsers removed and exposes Shopify-specific features for deeper Admin integration. It runs in Shopify Admin on both web and mobile.

Three capabilities highlight the problem space:

  • URL synchronization. Client-side routers like react-router call pushState() and related History API methods, but inside an iframe those changes never reach the browser’s address bar. A reload returns the merchant to the app’s landing page, not where they were. App Bridge lets an app update a fragment of the top-level URL so navigation state survives reloads.
  • Navigation. The Shopify Admin sidebar is normally off-limits to iframes. App Bridge lets an app add menu items there so merchants can move between app sections without leaving the Admin shell.
  • Identity. Without cookies and storage, an app cannot reliably tell which user opened it. App Bridge supplies an OpenID Connect ID Token so apps can always determine the active user and make GraphQL API requests against the correct shop.

Historically, developers received App Bridge in two forms. @shopify/app-bridge was a thin wrapper over the postMessage() interface; it was flexible but left developers to manage request-response mapping themselves. @shopify/app-bridge-react wrapped those primitives in React components, which improved developer experience but was not idiomatic React and did not work with server-side rendering frameworks like Remix.

A final, web-native App Bridge

The new App Bridge is the last version. It replaces @shopify/app-bridge and will eventually underpin @shopify/app-bridge-react. The rewrite abandons the message-passing feel of its predecessor in favor of standard web platform mechanics.

Setup is now a single <script> tag in the document <head>. Loading from a CDN is deliberate: fixes reach every app immediately without requiring developers to bump npm dependencies and redeploy. Shopify commits to backwards compatibility, so existing apps need no changes.

With App Bridge active, standard web APIs behave as they would outside an iframe. Calling history.pushState() notifies Shopify Admin of the URL change automatically, which means client-side routing libraries like react-router work out of the box. The goal is to repair iframe limitations to the point that no custom adapters are needed for ordinary web development.

For deeper Admin integration, App Bridge uses Custom Elements, a web standard supported across browsers. Custom Elements work with any framework because all frameworks interact with the DOM API, and they are inspectable in browser DevTools without extensions. When a merchant clicks a sidebar link, App Bridge forwards the click event to the corresponding <a> element inside the iframe, so client-side routers handle it normally.

The new App Bridge is production-ready now. Old clients remain supported, and mixing old and new clients in the same app is permitted.

Why Remix fits

Remix joined Shopify in October 2022. Its model separates an app into routes, each of which defines how to obtain the data it needs to render. When a request arrives for a URL like http://myapp.com/products/4, Remix looks for /routes/products/4.js and falls back to placeholder matches like /routes/products/$id.js. Each route can define a loader that runs server-side and can access databases or third-party APIs. Remix detects whether the request is a full browser navigation or a client-side transition and renders accordingly—HTML for the former, data for the latter—feeding the result to either the server-side render or react-router on the client.

This design makes backend APIs a by-product of frontend code. Loaders and actions implicitly generate the endpoints an app needs. Server-side rendering also means personalized content reaches the screen faster than in a traditional client-rendered app.

Most apps need Shopify’s GraphQL API, which requires Shopify-specific setup like OAuth access tokens, ID Tokens, and HMAC signature verification. The @shopify/shopify-app-remix package handles that plumbing, exposing a configured shopify singleton that gives access to the Admin GraphQL API for the shop currently loading the app.

Storage and session handling

Previous templates shipped with SQLite and adapters for MySQL and Redis. The new template is opinionated in the Remix spirit and comes with Prisma, which provides adapters for most databases, an ORM API, and a UI for inspecting database contents. Shopify also published a Prisma session-storage adapter that stores session data; it is Remix-agnostic, so apps built on older templates can adopt it without migrating frameworks.

Developers can start a new app through the Shopify CLI, selecting the new Remix option.

Beyond Admin apps

The Remix template and new App Bridge client are initial steps. Shopify is applying the same rethinking to Checkout extensions and reworking Polaris, its design system, with the goal of making it more flexible and idiomatic. The direction is consistent: lean on the web platform ecosystem and stop requiring developers to learn and work around Shopify-specific constraints.