Swap the media on an element you've selected on the design canvas with a generated result — keeping the element in place and handling img↔video flips automatically.
Where: generation node result (with something selected on the canvas) — Hover result → click Apply, or ⋯ menu → Paste to Replace
Key ideas
- Selection-gated action: The Apply / 'Paste to Replace' control only appears when something is selected on the design canvas (gated by hasCanvasSelection). With nothing selected, the action alerts you to select an object first instead of inserting a new one.
- Replace semantics: It routes through the f0 clipboard's pasteToReplace, which flips an <img>↔<video> tag when the generated media type doesn't match the selected element's tag, and falls back to a background-image for non-img/video targets — identical to Cmd-clicking 'Paste to replace'.
- Durable source: Like Add-to-canvas, a non-MediaGen URL is uploaded first (persistent media id when a source node id + org are available, with a cache-busting timestamp) so the replaced element points at a stable asset.
Steps
- On the design canvas, click the element whose media you want to replace (an image, a video, or a box you want a background image on).
- Run or open a generation node so its result thumbnails are showing.
- Hover the result and click 'Apply', or open the result's ⋯ menu and choose 'Paste to Replace' (this control is hidden unless a canvas element is selected).
- The asset uploads if needed, then replaces the selected element's media in place — img↔video tags flip automatically, and non-media targets receive it as a background image.
- If you triggered it with nothing selected, dismiss the 'Please select an object on the canvas to replace' alert, select an element, and try again.
FAQ
Why is the Apply / Paste to Replace button missing?
It only shows when you have an element selected on the design canvas. Select something first; the control is gated on hasCanvasSelection.
What if I replace an image with a generated video (or vice versa)?
The tag is flipped for you: pasteToReplace turns an <img> into a <video> (or back) when the media type doesn't match, so you don't have to swap elements manually.
Can I drop a generated image onto a plain div?
Yes — for targets that aren't <img>/<video>, replace falls back to setting it as a background image, the same as the editor's native paste-to-replace.