Compose independently deployed applications into a unified interface. Framework agnostic. Cross-origin ready. Full interactivity.
An iframe gives you perfect isolation and zero composability — a rigid rectangle that fights your page on sizing, focus, and theme. A shared bundle gives you composability and zero isolation — shared globals, shared CSS cascade, shared bugs.
Virtual Frame does neither. It loads the remote in a hidden iframe — so its framework, router, and runtime work normally — and mirrors the live DOM into a host element you control, with CSS rewritten, events replayed, and full cross-origin support.
<!-- One import, anywhere on the page -->
<script type="module">
import "virtual-frame/element";
</script>
<!-- Drop it in like a native element -->
<virtual-frame
src="https://remote.example.com/dashboard"
isolate="open"
selector="#chart"
style="width: 100%; height: 400px">
</virtual-frame>Virtual Frame doesn't re-execute your app — it observes it. A hidden iframe keeps the remote's runtime intact. A mirror layer copies DOM into your host. Events flow back. That's the whole model.
Hidden off-screen, pointed at the remote URL. The remote runs as a complete standalone application — its framework, router, effects, fonts. Nothing is re-executed.
Any element on your page — a <div>, a section, a component root. Virtual Frame attaches an optional Shadow DOM and mirrors the remote's <body> subtree in.
Same-origin uses a MutationObserver and CSS rewriter. Cross-origin routes through a bridge script over postMessage. Events replay. Inputs stay in sync. Scroll is bidirectional.
First-class bindings for every major framework, and SSR-ready integrations for the meta-frameworks. Host and remote can be any combination — they don't need to match.