Skip to main content

Embed metapages into your app

note

This page is meant for developers, with some coding knowledge, or those who build web apps/sites

Embed metapages in your site (links to code examples)

Embedding a metapage/frame means you get a complete, functional, already-deployed piece of software that takes a few lines of code to add to your own app.

One way to think about embedding metapages is that each metaframe is a web component with inputs and outputs.

You can wire them up together with the metapage library, or even stitch them together yourself in your own app, if that makes more sense for you use cases.

Developer advantages:

  • Embed visual modules like the monaco code editor with a few lines of code
    • The monaco module requires various complex and specific workarounds for various build tools (webpack, vite, etc)
    • The component is only loaded when shown to the user, so no assets are downloaded if the component is not used in your app
  • The metaframes in the metapage are iframes, and communicate using the web standard postMessage
    • This means they are security isolated:
      • If there is malicious code in a metaframe, it is very difficult for it to interfere with your main app code, as the only way to access the parent (your app) is via the secured postMessage system (metapages control who can send messages)
      • The code running in metaframes

A single metapage

Metapage plus editor

Links to code example

A single metaframe:

A single metapage:

Metapage plus editor: