Push an image or video result from a flowGen node straight onto the f0 design canvas as a real <img>/<video> element, placed with the same rules as a clipboard paste.
Where: any generation node's result thumbnail — Hover a result → click Add, or open the ⋯ menu → Add to canvas
Key ideas
- Add to canvas action: Each result thumbnail exposes an 'Add' button (visible on hover) and an 'Add to canvas' item in the ⋯ menu. It inserts a real element: an <img> for images, or a <video> with controls/playsinline/autoplay/loop/muted for video.
- Smart placement: Placement reuses resolveObjectPasteTarget: empty selection → onto the active page's canvas wrapper; a selected container → inside it; a selected leaf → as its next sibling. The new element is selected so it's immediately editable, and the insert is wrapped in one history gesture (single undo).
- Persistence on the way out: If the result is already a MediaGen URL it's used as-is; otherwise it's fetched and uploaded so the canvas points at a durable URL. With a source node id + organization, it uploads under a persistent media id (enabling later auto-update), appending a cache-busting timestamp.
Steps
- Run a generation node (e.g. Generate Image / Video Generation) so it shows result thumbnails.
- Optionally click an element on the design canvas first to set the paste target (a container to nest inside, or a leaf to insert after); leave nothing selected to drop it on the page.
- Hover the result and click 'Add', or open the result's ⋯ menu and choose 'Add to canvas'.
- Wait for the brief upload (the body shows a 'waiting' state); the new <img>/<video> appears on the canvas, already selected for you to position or style.
- Undo once if you want to remove it — the insert was committed as a single history step.
FAQ
Where exactly does the asset land?
It mirrors clipboard paste: nothing selected drops it onto the active page's canvas wrapper; a selected container nests it inside; a selected leaf inserts it as the next sibling. The new element is auto-selected.
Is video added as a real player?
Yes — video is inserted as a <video> element with controls, playsinline, autoplay, loop, and muted set, not as a static image.
Does it re-upload assets every time?
No. If the URL is already a MediaGen source it's used directly. Otherwise it uploads once; with a source node id it uses a persistent media id so the same asset can later auto-update on the canvas.