{"name":"Remote DOM: Isolate UI Rendering with Sandboxed JavaScript Environments","description":"Remote DOM, developed by Shopify, enables rendering DOM elements created in a sandboxed JavaScript environment directly to the main DOM. This allows for isolating potentially untrusted code off the main thread, while still providing a controlled set of UI elements to the main page. It facilitates synchronizing UI between environments like iframes or Web Workers and the top-level page, supporting various JavaScript frameworks for flexible and performant web applications.","github":"https://github.com/Shopify/remote-dom","url":"https://osrepos.com/repo/shopify-remote-dom","source":"osrepos.com","sourceDescription":"This repository profile is provided by osrepos.com, an open source repository discovery platform.","repositoryProfile":"https://osrepos.com/repo/shopify-remote-dom","generatedFor":"open source discovery and AI-assisted research","markdown":"https://osrepos.com/repo/shopify-remote-dom.md","json":"https://osrepos.com/repo/shopify-remote-dom.json","topics":["TypeScript","DOM","Web Workers","UI Isolation","Frontend Development","Performance","JavaScript","Shopify"],"keywords":["TypeScript","DOM","Web Workers","UI Isolation","Frontend Development","Performance","JavaScript","Shopify"],"stars":null,"summary":"Remote DOM, developed by Shopify, enables rendering DOM elements created in a sandboxed JavaScript environment directly to the main DOM. This allows for isolating potentially untrusted code off the main thread, while still providing a controlled set of UI elements to the main page. It facilitates synchronizing UI between environments like iframes or Web Workers and the top-level page, supporting various JavaScript frameworks for flexible and performant web applications.","content":"## Introduction\n\nRemote DOM is a powerful library developed by Shopify that allows developers to render a tree of DOM elements created in a sandboxed JavaScript environment directly to the DOM in a different JavaScript environment. This innovative approach enables the isolation of potentially untrusted code off the main thread, while still allowing it to render a controlled set of UI elements to the main page.\n\nThe library is particularly useful for synchronizing elements between a hidden `<iframe>` and the top-level page, or for leveraging Web Workers to run JavaScript libraries that typically require a top-level HTML page, such as Preact or Svelte. Remote DOM also offers a minimal polyfill of key DOM APIs to facilitate more lightweight sandboxed environments.\n\n## Installation\n\nTo integrate Remote DOM into your project, you'll need a web project capable of running two JavaScript environments: the \"host\" environment (main HTML page) and the \"remote\" environment (sandboxed). The core package, `@remote-dom/core`, is essential for establishing the connection between these environments.\n\nYou can install it using your preferred package manager:\n\nbash\n# npm\nnpm install @remote-dom/core --save\n# pnpm\npnpm install @remote-dom/core --save\n# yarn\nyarn add @remote-dom/core\n\n\nAfter installation, you will set up a \"receiver\" on your host page to process updates from the remote environment and a `RemoteMutationObserver` in your remote environment to communicate changes back to the host.\n\n## Examples\n\nRemote DOM provides several examples to help you get started and understand its capabilities:\n\n*   **Getting started**: Demonstrates the most basic usage, synchronizing text content between a main page and an `<iframe>`.\n*   **Custom element**: Extends the basic example to show how a sandboxed environment can render custom button elements, including handling attributes and events.\n*   **The “kitchen sink”**: A comprehensive example showcasing a fully-featured implementation of Remote DOM. This includes custom elements with properties, events, and methods, and the ability to sandbox UI in a web worker. It features implementations in vanilla JavaScript, htm, Preact, React, Svelte, and Vue.\n\nThese examples highlight the flexibility of Remote DOM, allowing you to mix and match various host and remote technologies without being tied to a specific JavaScript framework.\n\n## Why Use Remote DOM?\n\nRemote DOM offers significant advantages for modern web development:\n\n*   **UI Isolation**: It allows you to run potentially untrusted or complex UI logic in a sandboxed environment, protecting the main thread from performance bottlenecks or security risks.\n*   **Performance**: By offloading rendering tasks to Web Workers or iframes, Remote DOM helps keep the main thread free, leading to a smoother and more responsive user experience.\n*   **Framework Agnosticism**: The library is designed to work with any JavaScript framework or backend technology, providing a flexible solution for various project setups.\n*   **Controlled UI**: Through the use of custom elements and an allowlist approach, you maintain tight control over the visual appearance and functionality of elements rendered from the remote environment.\n\n## Links\n\n*   **GitHub Repository**: [https://github.com/Shopify/remote-dom](https://github.com/Shopify/remote-dom)\n*   **Core Package Documentation**: [https://github.com/Shopify/remote-dom/tree/main/packages/core/](https://github.com/Shopify/remote-dom/tree/main/packages/core/)\n*   **Contributing Guide**: [https://github.com/Shopify/remote-dom/blob/main/CONTRIBUTING.md](https://github.com/Shopify/remote-dom/blob/main/CONTRIBUTING.md)","metrics":{"detailViews":3,"githubClicks":3},"dates":{"published":null,"modified":"2026-02-15T12:01:01.000Z"}}