---
title: "Images and assets"
description: "Add your own media or generate it with Nuxie."
search:
  tags: ["Features"]
  keywords: ["upload image", "generate image", "replace everywhere"]
---

Use images, video, and other assets to give an Experience the look of your app. You can upload existing files, reuse something from your workspace library, or ask Nuxie to generate new media for the design.

## Add media to the Canvas

Open **Canvas** and choose **+** in the bottom toolbar, then **Image**, **Video**, or **3D**. This creates a media node: a source you can upload into or generate, then use in a screen.

Select the node to see its source and generation settings. The source sits beside your screens, so you can try different results without changing the screen's layout. An image layer inside a screen chooses which source it displays.

## Upload and reuse assets

To add images from your computer directly to the Canvas, choose **+ → Import**. You can select several images at once.

The asset picker contains the Project's assets and lets you search the workspace library by filename. Choose a file from there, use the upload action, or drag a file into the upload area. Images can be PNG, JPEG, GIF, WebP, or SVG; videos can be MP4 or WebM.

The uploader shows preparation and upload progress. If an upload fails, use its retry action. You may be asked to choose the original file again.

In the asset panel, **This Project** contains assets added to the Project. **Current Task** contains generated images you haven't used yet. Select an asset to see its details and usages, then choose a usage to find that placement in the design.

## Generated media

Ask Nuxie for an image or video in the Task, with the subject, style, and intended placement:

**Create a calm illustration of a runner preparing for their first 5K. Use the green and dark-blue colors from our app, with space above for a heading.**

> Create a calm illustration of a runner preparing for their first 5K. Use the green and dark-blue colors from our app, with space above for a heading.

To generate directly, choose **+ → Image** or **+ → Video**, select the node, enter a **Prompt**, and choose **Generate**. You can change the settings below before generating another result.

### Prompt and model

**Prompt** describes what to generate. Enter it directly or supply it through a connected text node. **Model** selects the generation model; the choices depend on the input types connected to the node.

### Results and output

**Results** sets the number of variations, from one to four. **Output** contains the selected model's settings, such as resolution, aspect ratio, quality, or video duration.

Choose **Generate** to run the node. Where available, the button shows the credit cost. Turn on **Locked** to keep the node's current result when you use **Run everything edited** from the Canvas menu.

### History

**History** keeps earlier results available so you can return to one you prefer. Select a result to use it, or delete results you no longer need.

### 3D assets

A 3D media node can use an uploaded GLB or a generated model. Its source picker handles 3D files; images and videos use their own pickers.

<span id="add-images-to-the-design" />

## Placement and cropping

To display a media source in a screen:

1. **Select the screen**

    Select the screen to reveal its tools in the bottom toolbar.

2. **Add a media layer**

    Choose **Add image** or **Add video** beside **+** to add a layer inside the screen.

3. **Choose its source**

    Select that layer and use **From** in its Image or Video settings to choose the media source.

The layer displays the selected source's output. **Show source** takes you back to the source so you can change its prompt, upload, or selected result. Choosing **None** unlinks the layer while keeping the image or video it currently displays.

You can also tell Nuxie where an asset should go. Include any part of the image that needs to stay visible:

**Use this workout image on the introduction screen. Keep the runner visible and leave space for the headline.**

> Use this workout image on the introduction screen. Keep the runner visible and leave space for the headline.

The crop depends on the image's proportions and the space available in the layout. You can use the same asset in several components, each with a different layout.

<span id="keep-content-readable" />

## Text over images

Text placed over an image remains separate from the asset. It can use your [design system's](/docs/guides/styling-and-themes) colors and background treatments, and you can change the copy without regenerating the image. This is especially useful for prices, plan names, and personalized content.

<span id="preview-the-result" />

## Replace an image

Replace the image in a component to change one placement, or choose **Replace Everywhere** to update all of an asset's current draft usages. The confirmation shows how many placements will change, and you can undo the replacement as one change.

Published versions keep their existing images until you [publish an update](/docs/guides/versions-and-updates).

**If placements change while you're confirming**

If the usages change while the confirmation is open, Nuxie asks you to confirm the new count before replacing them.

## Asset management

Rename assets from their details to make them easier to find later. **Save to Library** makes an eligible asset available elsewhere in your workspace; assets already saved show **In Library**.

The removal action depends on where the asset belongs. **Remove from Project** removes a Project asset, while **Delete Task Asset** deletes one from the Task. The asset's usages show which screens depend on it before you remove it.