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 themetapage
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
- This means they are security isolated:
A single metapage
Metapage plus editor
Links to code example
A single metaframe:
A single metapage:
Metapage plus editor: