Remote rendering: Shopify’s take on extensible UI - Shopify

This post details the evolution of Shopify's UI extension system, introducing the concept of 'remote rendering' where UI definition is separated from UI rendering. It explains the technical challenges and solutions, including the use of `MessageChannel` for communication, the `@remote-ui/rpc` package for remote procedure calls with automatic memory management, and the `RemoteRoot` and `RemoteReceiver` for defining and reconstructing UI component trees. It also covers the `DomReceiver` for rendering to the DOM and integration with React via `@remote-ui/react`. A key focus is on sandboxing extensions for security and reliability, with a simple sandbox implementation and examples of host-extension interaction using an `api` object for native functionality.
More from the Shopify Mobile Hybrid Architecture trail
- Mobile Bridge: Making WebViews Feel Native (2025) - Shopify
- Migrating our Largest Mobile App to React Native - Shopify
- Implementing Server-Driven UI Architecture on the Shop App - Shopify
- A Kotlin Style .copy Function for Swift Structs - Shopify
- Shipit! Presents: How We Write React Native Apps - Shopify