Skip to main content
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: 
// 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

Code Editor

Edit your project files directly

Live Preview

See your changes instantly