Embedding example

This page demonstrates the Butterfly embed message bridge. Use the buttons to send postMessage requests to the iframe, then watch the replies from Butterfly appear in the message log. Document byte responses are offered as .bfly downloads instead of being printed into the page.

Get data Render PNG Render SVG Load .bfly Clear

Last response Waiting for Butterfly

Send a request after the embedded document is visible.

Result None

Render an image or request document data to show it here.

Messages 0

1. No messages yet.

The parent page sends messages with this shape:

iframe.contentWindow.postMessage({ type, message }, butterflyOrigin);

Butterfly sends responses and events back with the same shape:

window.addEventListener('message', (event) => {
  const { type, message } = event.data ?? {};
});