@figureit/iframe

Runs the FigureIt editor in an iframe and speaks to it over postMessage, for hosts that want the editor at arm's length.

FigureIt comes from figure it out. You draw what you are thinking, see it, arrange it, and understand it in the arranging.

npm install @figureit/iframe

import { attachFigureItIframe } from "@figureit/iframe";

const editor = attachFigureItIframe(document.querySelector("iframe"), {
  targetOrigin: "https://app.figureit.io", // never "*"
  instanceId: "design-diagram",
  onChange: (message) => stage(message.detail.source),
});

editor.load({ source, documentId, baseRevision, save: "host" });

Why a frame

Isolation you can point at. The editor runs in its own origin with its own memory, so a bug in it cannot reach your page and your dependencies cannot reach it. The cost is that everything crosses a message boundary — which is also the benefit, because the boundary is small enough to read.

targetOrigin is required and wildcards are refused. A bridge that accepts messages from anywhere is not a boundary.

The same contract

save-request, dirty-change, conflicts and their resolutions all cross the bridge unchanged. What the editor asks of a host is the same whether it is embedded directly or through a frame — see the saving contract.

Documentation

docs.figureit.io/embed/iframe

Licence

MIT.