For embedding other pages you can either use the the vanilla library or the React component.
In either case you should polyfill URLPattern (e.g. by using urlpattern-polyfill), since browser compatibility is not great atm.
npm install @emweb/hostimport { fetchFrameSrc, onWindowMessage } from "@emweb/host";
// put the URL you want to embed here
const url = "https://shd.is/s/b8agf9";
const src = fetchFrameSrc(url);
// src can now be used as the src attribute of an iframe
// You can use the onWindowMessage function to listen to messages from the embedded page's iframe
onWindowMessage(url, {
onResize: (width, height) => {
console.log("iframe size", width, height);
},
});The React version falls back to oembed if there is no emweb manifest for the given URL.
npm install @emweb/reactimport { Embed } from "@emweb/react";
// this already handles resizing
<Embed url="https://shd.is/s/b8agf9" />;The only requirement is a manifest
hosted at /.well-known/emweb.json that points towards URLs that have
permissive CORS headers set.
If you want to give the host page the ability to resize, depending on your
page's content size, you can use the @emweb/bus library.
npm install @emweb/busimport { postResizeChanges } from "@emweb/bus";
const cleanup = postResizeChanges();
// call cleanup() to stop
58F4
sending resize messages
// this makes it straightforward to register e.g. within a React component
useEffect(postResizeChanges, []);