Skip to main content

How do metapages work?

What is a Metapage?​

A metapage is a framework that connects multiple independent web applications (metaframes) to create interactive workflows. Each metaframe runs in its own iframe, maintaining security isolation while allowing controlled data exchange through standardized messaging.

Core Concepts​

Metaframes​

Metaframes are web applications loaded as iframes. Each metaframe:

  • Functions as an independent application
  • Has its own security context and resources
  • Communicates with other metaframes through a messaging system
  • Is isolated by browser security mechanisms

Data Connections​

Metaframes communicate through defined data connections:

The metapage coordinates message routing based on the connection graph defined in the metapage's metapage.json file.

How It Works: Technical Architecture​

Metapages use iframe isolation and the browser's built-in postMessage system:

  1. Each metaframe runs in its own iframe sandbox
  2. The parent metapage coordinates all communication
  3. Data transfers use the browser's postMessage API
  4. When metaframes communicate, messages flow through the parent page:
    • Source metaframe → Parent page (via postMessage)
    • Parent page routes the message based on connection rules
    • Parent page → Target metaframe (via postMessage)
  5. A JavaScript client in each metaframe handles the messaging protocol

Security Model​

The metapage architecture leverages browser security features:

  • Parent page content cannot inspect iframe content and vice versa
  • Frames cannot directly access each other's content
  • The page can send and receive messages to frames
  • Frames send messages to each other via the page

Integrating with Metapages​

You can embed metapages in your own websites and interact with them programmatically:

Your website can:

  • Receive notifications when any metaframe outputs change
  • Set inputs for any metaframe
  • Monitor and control the data flow between components

For more details on embedding a metapage in a React application, see [Problem Internal Link].