remote-dom: Synchronize Sandboxed UI with a Host Page

Overview

Remote DOM synchronizes changes to a DOM-like tree from one JavaScript environment to another, where a host can render them as real elements. This lets applications isolate code in an iframe or Web Worker while still displaying its UI on the main page.

It is intended for applications that need a controlled interface between sandboxed code and host-rendered components. The host can define which custom elements and members remote code is allowed to use, and teams can use different frameworks on either side.

Key Features

• Sends remote tree mutations to a host through a connection.
• Provides a DOM receiver that creates and updates elements in the host page.
• Supports policies that restrict remote elements and their attributes, events, and methods.
• Offers RemoteElement for declaring which attributes and events a remote custom element communicates.
• Includes a minimal DOM API polyfill for running remote code in environments such as Web Workers.
• Provides companion packages for React, Preact, and signals.
• Demonstrates use with vanilla JavaScript, htm, Preact, React, Svelte, and Vue.

Use Cases

• Teams embedding third-party or otherwise untrusted UI code: isolate its JavaScript and allow only host-approved elements and interactions.
• Framework authors or application developers: render a remote framework's UI through custom components implemented by the host.
• Applications using Web Workers: run UI-producing JavaScript away from the main thread with the included DOM API polyfill.
• Teams building plugin interfaces: give sandboxed plugins a controlled set of host-rendered UI elements and events.

Project Facts

• Language: TypeScript
• License: MIT
• Stars: 1.3k
• Forks: 92
• Topics: none listed
• Archived: no

Getting Started

Install the core package:

npm install @remote-dom/core

See the repository README and @remote-dom/core documentation for setup details and examples.

Alternatives

• mcp-ui: mcp-ui connects interactive web interfaces to Model Context Protocol tools and compatible hosts, rather than mirroring a sandboxed UI tree into a host page.

Considerations

• A project needs both a host environment that renders real elements and a remote environment that produces the synchronized tree.
• Remote DOM provides the synchronization mechanism, not the host application's custom element implementations or UI design.
• Configure the host's element policy deliberately. The README notes that omitting the elements option leaves element names unrestricted.
• Passing function properties between environments may require an additional serialization library, as shown in the examples.