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. The render panel can export the current canvas view, start at the document origin, or use a custom camera position. PNG and SVG share the same size, scale, rotation, padding, and background controls.

Get dataLoad .bflyClear

Render export

Current view uses the position, zoom, rotation, and size visible in the embedded canvas. Padding remains configurable below.

XYWidthHeightScaleRotation (degrees)

Padding topPadding rightPadding bottomPadding left

Render background

Render PNGRender SVG

Last responseWaiting for Butterfly

Send a request after the embedded document is visible.

ResultNone

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

Messages0

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