> ## Documentation Index
> Fetch the complete documentation index at: https://docs.helloleo.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Asset Manager

> Upload and manage images, PDFs, fonts, and media files

The Asset Manager lets you upload and manage static assets for your project directly from HelloLeo.

## What You Can Upload

The Asset Manager supports various file types:

* **Images** - PNG, JPG, JPEG, GIF, SVG, WebP, ICO, BMP
* **Documents** - PDF, JSON, CSV, TXT, XML
* **Fonts** - WOFF, WOFF2, TTF, OTF, EOT
* **Media** - MP3, MP4, WAV, OGG, WebM

**File size limit:** 10MB per file

## How to Use

### Opening the Asset Manager

1. Click the **image icon** in the header toolbar
2. The Asset Manager panel opens on the right side
3. You can toggle between Asset Manager, Code Editor, and Live Preview

### Uploading Files

1. Click the **Upload** button
2. Select a file from your computer
3. The file uploads automatically to your project's `public/` folder
4. Images go to `public/images/`, other files go to `public/`

### Using Assets in Your Project

After uploading, use the asset path in your code:

```jsx theme={null}
// For images
<img src="/images/logo.png" alt="Logo" />

// For other files
<a href="/document.pdf">Download PDF</a>
```

### Managing Assets

Each asset card shows:

* **Preview** - Thumbnail for images (when project is deployed)
* **Filename** - The uploaded file name
* **Size** - File size
* **Path** - The public path to use in your code

**Actions** (visible on hover):

* **Copy path** - Copy the asset path to clipboard
* **Share with Leo** - Send the asset path to Leo for use
* **Delete** - Remove the asset from your project

## Features

### Image Preview

When your project is deployed, image thumbnails display directly in the Asset Manager. For private projects, authentication is handled automatically.

### Git Integration

All uploaded assets are automatically committed to your project's git repository. This ensures your assets are versioned and synced.

### Server Sync

If your project is deployed, uploaded assets sync automatically to your live server. Changes appear immediately in your deployed app.

### Secure Uploads

* Files are validated for allowed types
* Filenames are sanitized to prevent security issues
* Size limits protect against large uploads
* Executable files (JS, PHP, etc.) are blocked

## Best Practices

### File Naming

* Use descriptive names: `hero-banner.png` not `image1.png`
* Avoid spaces: use hyphens or underscores
* Keep names lowercase for consistency

### Image Optimization

* Compress images before uploading
* Use WebP format for better performance
* Consider image dimensions for your use case

### Organization

* Images automatically go to `public/images/`
* Keep related assets together
* Delete unused assets to keep your project clean

## Tips

* **Use "Share with Leo"** to quickly tell Leo about uploaded assets
* **Copy path** makes it easy to use assets in your code
* **Preview requires deploy** - Deploy your project to see image previews
* **Works with private projects** - Auth tokens are handled automatically

## Working with Leo

After uploading an asset, you can:

* Click **Share with Leo** to send the asset path to the chat
* Ask Leo to use the asset: "Use the uploaded image at /images/logo.png"
* Leo will incorporate the asset into your project

<CardGroup cols={2}>
  <Card title="Code Editor" icon="code" href="/features/code-editor">
    Edit your project files directly
  </Card>

  <Card title="Live Preview" icon="eye" href="/features/live-preview">
    See your changes instantly
  </Card>
</CardGroup>