Virtual Frame

Microfrontend projection for the modern web.
Compose independently deployed applications into a unified interface —
with full interactivity, style isolation, and cross-origin support.

Documentation  •  Get Started  •  Examples  •  GitHub

The Problem

Enterprise frontends are no longer monoliths. They're assembled from dozens of independently owned services, teams, and deployment pipelines. Yet the tools for composing them are stuck in the past — containers that break layout flow, build-time coupling that kills team autonomy, or custom protocols that lock you into a single framework.

Virtual Frame takes a different approach. It projects remote content directly into your DOM — fully interactive, style-isolated, and framework-agnostic. No build-time coordination. No layout traps. No vendor lock-in.

Why Virtual Frame

Ship Independently, Compose Seamlessly

Each team deploys on their own schedule. Virtual Frame projects their UI into a unified experience at runtime — no shared builds, no version conflicts, no deployment coordination.

Any Framework. Any Origin. Any Content.

React, Vue, Angular, Svelte, Solid, Next.js, Nuxt, SvelteKit — it doesn't matter. Virtual Frame works with any web content from any origin. Bring your own stack.

True DOM Integration

Projected content lives in your page's DOM flow. It participates in your layout, respects your scroll context, and behaves like native content — because it is.

Enterprise-Grade Isolation

Shadow DOM encapsulation prevents style bleed between host and remote applications. Each projected surface is sandboxed without sacrificing interactivity or accessibility.

Architecture

Key Capabilities

Quick Start

npm install virtual-frame

That's it. No build plugins. No config files. No framework buy-in.

HTML Custom Element

<script type="module">
  import "virtual-frame/element";
</script>

<virtual-frame src="https://other-team.example.com/widget" isolate="open"></virtual-frame>

React

npm install virtual-frame @virtual-frame/react @virtual-frame/store

import { VirtualFrame, useVirtualFrame, useStore } from "@virtual-frame/react";
import { createStore } from "@virtual-frame/store";

const store = createStore();

function App() {
  const count = useStore(store, ["count"]);
  const frame = useVirtualFrame("/remote/", { store });

  return (
    <>
      <p>Count: {count ?? 0}</p>
      <VirtualFrame frame={frame} selector="#counter" />
    </>
  );
}

JavaScript API

import { VirtualFrame } from "virtual-frame";

const vf = new VirtualFrame(sourceFrame, host, {
  isolate: "open",
  selector: "#main-content",
});

Bindings also available for Vue, Svelte, Solid, Angular, and Next.js — see the full documentation.

Shared Reactive Store

@virtual-frame/store provides an event-sourced synchronized store that keeps state in sync between host and remote applications in real time. Read and write like a plain object — synchronization happens automatically.

import { createStore } from "@virtual-frame/store";

const store = createStore();

store.count = 0;
store.user = { name: "Alice" };

console.log(store.count); // 0
console.log(store.user.name); // "Alice"

When passed to a VirtualFrame component, the store automatically synchronizes between the host and the remote. Both sides see the same state and updates propagate instantly.

• Proxy-based API — read and write like a plain object
• Event-sourced — every mutation is an immutable operation in an append-only log
• Deterministic sync — operations are totally ordered by (timestamp, sourceId, seq)
• Microtask-batched — multiple writes in the same tick produce one subscriber notification
• Framework-native bindings — useStore hooks for React, Vue, Svelte, Solid, and Angular

Packages

Examples

Every major framework. Host + remote pairs. Ready to run.

Cross-Origin

For content served from a different origin, include the bridge script in the remote page:

<script src="https://unpkg.com/virtual-frame/dist/bridge.js"></script>

Virtual Frame automatically detects cross-origin sources and activates the bridge. No server proxy or CORS configuration required.

Contributing

We welcome contributions of all kinds — bug reports, feature requests, documentation improvements, and code.

Before submitting a pull request, please make sure your changes pass the full quality pipeline:

pnpm install        # Install dependencies
pnpm build          # Build all packages
pnpm test           # Unit tests (Vitest + browser mode)
pnpm test:e2e       # End-to-end tests (Playwright)
pnpm lint           # Lint with oxlint
pnpm format:check   # Check formatting with oxfmt
pnpm typecheck      # TypeScript type checking

Run the full example suite in development mode to verify integration across frameworks:

pnpm dev            # All examples in parallel

See the documentation site for architecture guides and API reference.

License

Source Available License (SAL-1.0). See LICENSE for details.

Virtual Frame is created and maintained by Level 0x40 Labs — building the next generation of web composition infrastructure.

Website  •  GitHub  •  Level 0x40 Labs