Iframe Sizing and Resize Handling
Use Meshes resize events to keep the iframe height aligned to the embedded workspace content.
Meshes embed can report its content height to the parent.
meshes:resize
The iframe sends:
{
"type": "meshes:resize",
"height": 842
}
Host-owned sizing
The host app decides how to apply that height.
Typical pattern:
- set
iframe.style.height - clamp to a minimum height
- optionally clamp to a maximum height
const embedOrigin = new URL(launchUrl).origin;
const minHeight = 480;
window.addEventListener('message', (event) => {
if (event.origin !== embedOrigin) return;
if (event.data?.type === 'meshes:resize') {
iframe.style.height = `${Math.max(minHeight, event.data.height)}px`;
}
});
Important note
The iframe does not automatically change its own outer size. The parent must apply the new height.