emweb

Demo | Blog Post

Host

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.

Vanilla

Installation

npm install @emweb/host

Usage

import { 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);
  },
});

React

The React version falls back to oembed if there is no emweb manifest for the given URL.

Installation

npm install @emweb/react

Usage

import { Embed } from "@emweb/react";

// this already handles resizing
<Embed url="https://shd.is/s/b8agf9" />;

Guest

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.

Installation

npm install @emweb/bus

Usage

import { postResizeChanges } from "@emweb/bus";

const cleanup = postResizeChanges();
// call cleanup() to stop sending resize messages

// this makes it straightforward to register e.g. within a React component
useEffect(postResizeChanges, []);