Remote rendering: Shopify’s take on extensible UI

Summary

Shopify describes a UI extension architecture designed to give third-party code consistent, accessible, cross-platform experiences without allowing it to compromise the host application. Its remote-rendering approach separates UI definition from rendering, with extensions communicating with hosts through MessageChannel-based message passing; hosts are implemented in JavaScript, Kotlin, and Swift. The open-source remote-ui library supplies RPC for passing callbacks across postMessage, automatic memory management, a DOM-like RemoteRoot that serializes updates as JSON, and receivers that map remote components to DOM or React components. A sandbox isolates untrusted extension code and controls exposed APIs across web workers, Android web views, and iOS JsCore. The system powers product-subscription and post-purchase extensions, while a DOM-based version began releasing in July 2025.

Context

Shopify needed third-party UI extensions to match native content in look and feel, performance, and accessibility while remaining familiar to developers, secure and reliable for the platform, and consistent across web, iOS, and Android.

Approach / What changed

The architecture separates extension code from host rendering and connects them through MessageChannel-based RPC. remote-ui provides the RPC, remote component-tree, and receiver layers; a sandbox runs untrusted code in a restricted environment and mediates communication with the host. Native receivers render the remote tree as DOM or React components, with platform implementations using web workers, Android web views, and iOS JsCore.

Takeaways

• The RPC layer uses Promise and Proxy objects to hide message-passing details and automatically retains or releases values such as event handlers as UI components mount and unmount.
• RemoteRoot exposes a DOM-like API, serializes UI updates as JSON through RPC, and RemoteReceiver reconstructs the component tree so hosts can render it with native components.
• Shopify’s production sandbox restricts globals, limits fetch to specific domains, and is loaded from a separate domain; the approach currently supports product subscriptions and post-purchase extensions.

Related reading