> ## Documentation Index
> Fetch the complete documentation index at: https://beta-docs.replo.app/llms.txt
> Use this file to discover all available pages before exploring further.
# Assets
> Browse, filter, approve, and reuse your project's media: images, video, fonts, documents, and audio.
export const Screenshot = ({src, altText, width, shadow = true}) => {
const generateAltText = imageSrc => {
if (!imageSrc) return "Screenshot";
const filename = imageSrc.split("/").pop() ?? "";
const nameWithoutExt = filename.replace(/\.[^/.]+$/, "");
const readable = nameWithoutExt.replace(/[-_]/g, " ").replace(/\b\w/g, char => char.toUpperCase());
return readable === "" ? "Screenshot" : readable;
};
const finalAltText = altText ?? generateAltText(src);
const imageWidth = width ? `${width}px` : "100%";
return ;
};
The Assets app is your project's media library. Everything Replo generates and everything you upload, including images, video, fonts, documents, and audio, lives here in one place to browse, filter, approve, and reuse.
You can reach Assets from the **+** in the tab bar or the Cmd+K menu.
## Where assets come from
Assets arrive two ways: you upload them with the **Upload** button in the top right, or Replo creates them while building your store. Either way they land in the same library, ready to filter, approve, and reuse.
Anything in the library can be referenced later with an [@-mention](/sessions-and-history#mentions) so Replo uses exactly the file you mean, or pushed straight into the chat with **Add to chat** (see below).
## Find an asset
Use the search box to match on file name, or open **Filters** to narrow the grid. You can combine any of these, and a count next to each option shows how many assets match.
* **Status**: All statuses, Approved, Drafts, or Archived.
* **Type**: All types, Images, Videos, Fonts, Documents, or Audio.
* **Category**: All categories plus the categories present in your library (for example Photo, Photo/Lifestyle, Product).
* **Tags**: any tags that have been applied to your assets.
Toggle between the **grid** and **list** views with the buttons in the top right.
## Approve what Replo makes
Every asset has a status: **Draft**, **Approved**, or **Archived**. Approving is how you decide what is cleared for use on your site, so Replo's generated images don't go live until you've signed off. Set the status from the dropdown at the top of the detail panel (covered next), or filter the grid by status to review everything still in Draft.
## Open an asset
Click any asset (when you are not in selection mode) to open its detail view, where you can preview it full size and edit its metadata.
The right-hand panel is where you manage the asset:
* **Status**: switch between Draft, Approved, and Archived.
* **Alt text**: descriptive text used for accessibility and SEO when the image is placed on a page.
* **Tags**: free-form labels (type a tag and press Enter); these feed the Tags filter.
* **Category**: group the asset (for example Photo or Product).
* **Details**: read-only file info: created and updated dates, type, size, and format.
Edits aren't applied until you press **Save**; **Discard changes** reverts them.
### Preview actions
Hover the preview to reveal quick actions:
* **Add to chat**: drops a reference to the file into the chat so Replo uses exactly that asset.
* **Copy image**: copies the image itself to your clipboard (images only).
* **Copy URL**: copies the asset's hosted URL.
* **Open in new tab**: opens the raw file in a new browser tab.
## Work with several at once
Click the checkbox on a tile (or use the checkbox overlay) to enter **selection mode**. A bar appears along the bottom with the selected count and bulk **Actions**. To leave selection mode and go back to single-click-to-open, press the **X** on that bar.
If clicking a tile only highlights it instead of opening it, you're in selection mode. Press the **X** on the bottom bar to exit, then a single click opens the detail view.
## Related
Define your brand look and imagery.
Use assets on your site.