windmill-labs/windmill · error

The app preview is collapsed, so there is nothing to capture

Error message

The app preview is collapsed, so there is nothing to capture. Ask the user to expand the preview panel, then try again.

What it means

The raw-app screenshot/capture helper rasterises the app preview iframe via modern-screenshot. When the preview panel is collapsed, the iframe stays mounted and populated but has zero width/height, which passes the earlier readiness checks and would fail inside the rasteriser as an opaque decode error. The code checks clientWidth/clientHeight up front and throws this named error so the agent knows to ask the user to expand the preview before retrying.

Source

Thrown at frontend/src/lib/components/raw_apps/RawAppEditor.svelte:1879

		return () => restores.forEach((r) => r())
	}

	// Capture the live preview as a PNG data URL. The preview iframe
	// (/ui_builder/app-preview.html) is same-origin with no sandbox, so its rendered
	// document is reachable and can be serialized from here. There is no native
	// element-screenshot API; modern-screenshot reconstructs the DOM into an SVG
	// foreignObject, so a WebGL canvas is only captured when its context was created
	// with preserveDrawingBuffer. Lazy-imported so the library only loads on demand.
	const captureScreenshot: RawAppScreenshotRequester = async () => {
		const target = previewIframe?.contentDocument?.body
		if (!previewIframe || !previewIframeLoaded || !target) {
			throw new Error('App preview is not ready')
		}
		// Collapsing the preview leaves the iframe mounted and populated at zero
		// width, which passes every check above and then fails inside the rasteriser
		// as an opaque decode error. Name the cause so the agent can act on it.
		if (!target.clientWidth || !target.clientHeight) {
			throw new Error(
				'The app preview is collapsed, so there is nothing to capture. Ask the user to expand the preview panel, then try again.'
			)
		}
		const { domToPng } = await import('modern-screenshot')
		// Above CSS resolution for small previews (a 1× capture of a ~900px preview
		// reads blurry next to the live render), sub-1× for oversized bodies — see
		// captureScale. maximumCanvasSize is the belt over that math: the rasterised
		// box can exceed the body's client size, and an unbounded canvas on a tall
		// scrolling app can freeze the tab before normalize ever bounds the pixels.
		const scale = captureScale(Math.max(target.clientWidth, target.clientHeight))
		const restore = pinSingleLineText(target)
		try {
			return await domToPng(target, {
				backgroundColor: '#ffffff',
				scale,
				maximumCanvasSize: MAX_IMAGE_EDGE
			})
		} finally {

View on GitHub (pinned to e474e8803c)

Solutions

1. Expand the app preview panel in the RawAppEditor so it has non-zero width and height, then retry the capture
2. If the layout is too narrow, widen the editor window or drag the splitter to give the preview visible space
3. Retry the capture request after the preview is visibly rendered

Example fix

// agent-side retry loop
if (err.message.includes('preview is collapsed')) {
  await expandPreviewPanel();
  await capturePreview();
}

const el = document.querySelector('.app-preview iframe');
if (!el || el.clientWidth === 0 || el.clientHeight === 0) {
  throw new Error('Preview collapsed; expand before capture');
}

function isPreviewVisible(el: HTMLElement): boolean {
  return el.clientWidth > 0 && el.clientHeight > 0;
}

try { await capturePreview(); } catch (e) {
  if (e.message.includes('preview is collapsed')) { promptExpandPreview(); }
  else throw e;
}

When it happens

Trigger: Calling the capture/screenshot action while the app preview panel in RawAppEditor is collapsed (target.clientWidth or target.clientHeight is 0), even though the iframe is loaded and passes URL/readiness checks.

Common situations: A user or agent asks the AI assistant to snapshot/export the app while the preview pane is collapsed; narrow side-by-side layouts auto-collapse the preview; the user resized the preview to zero width before triggering capture.

Related errors

• Preview failed: ${response.status} - ${response.statusText}
• validationErrors.join('\n')
• SSE error: ${previewJobUpdates}
• Not found
• Node ${detail.id} not found

AI-assisted analysis of windmill-labs/windmill@e474e8803c (2026-09-03). Data as JSON: /api/errors/26d660597d05299b. Report an issue: GitHub.