Skip to main content

​
Overview

Assets are static files like images, fonts, videos, and icons used in your projects. Tesslate Studio provides easy asset management and optimization.

Upload Files

Drag-and-drop or browse to upload

Auto-Optimize

Automatic image optimization

CDN Delivery

Fast global asset delivery

Organized

Folder-based organization

​
Asset Types

Photos and graphics
  • PNG, JPG, JPEG
  • WebP, SVG
  • GIF
  • AVIF
Auto-optimization:
  • Resize for web
  • Compress automatically
  • Generate responsive sizes
  • Convert to modern formats

​
Uploading Assets

1

Open Assets Panel

Click Assets in project sidebar
2

Choose Upload Method

  • Drag-and-drop files
  • Click Upload button
  • Paste from clipboard
3

Select Files

Choose one or multiple files
4

Auto-Process

Files upload and optimize automatically
5

Use in Code

Assets appear in file tree and are ready to use
Images under 1MB are automatically optimized. Larger images may take a moment to process.

​
Using Assets in Code

​
Importing Images

// Import from assets folder
import heroImage from './assets/hero.png'
import logo from './assets/logo.svg'

// Use in components
function Hero() {
  return (
    <div>
      <img src={logo} alt="Logo" />
      <img src={heroImage} alt="Hero" />
    </div>
  )
}

​
Public Folder

For assets that don’t need import: 
// Files in public/ folder
// Access directly by path
<img src="/images/hero.png" alt="Hero" />
<link rel="icon" href="/favicon.svg" />

​
Background Images

// CSS background images
<div style={{
  backgroundImage: `url('/images/background.jpg')`
}} />

// Or with Tailwind
<div className="bg-[url('/images/bg.jpg')]" />

​
Asset Organization

​
Folder Structure

src/assets/
├── images/
│   ├── hero/
│   ├── products/
│   └── icons/
├── fonts/
│   └── custom/
└── videos/
    └── demos/

public/
├── favicon.svg
├── logo.png
└── social-preview.jpg
Processed by build
  • Imported in components
  • Bundled and optimized
  • Hashed filenames
  • Good for: Component images
Served directly
  • Not processed
  • Keep same filename
  • Referenced by path
  • Good for: Favicon, social images, PDFs

​
Image Optimization

​
Automatic Optimization

Tesslate automatically:
  • Compresses: Reduces file size
  • Resizes: Creates responsive sizes
  • Converts: Uses modern formats (WebP)
  • Lazy loads: Defers offscreen images

​
Manual Optimization

For more control:
1

Right-Click Asset

In assets panel, right-click image
2

Click Optimize

Choose optimization settings
3

Configure

  • Target size
  • Quality (1-100)
  • Format conversion
  • Responsive sizes
4

Apply

Optimized version replaces original

​
Responsive Images

​
Generating Sizes

Ask AI agent to create responsive image code: 
"Create a responsive image component for the hero image
that serves different sizes for mobile, tablet, and desktop"
AI generates: 
<picture>
  <source
    media="(min-width: 1024px)"
    srcSet="/images/hero-large.webp"
  />
  <source
    media="(min-width: 768px)"
    srcSet="/images/hero-medium.webp"
  />
  <img
    src="/images/hero-small.webp"
    alt="Hero"
    loading="lazy"
  />
</picture>

​
Fonts

​
Adding Custom Fonts

1

Upload Font Files

Upload .woff2, .woff, .ttf files
2

Create Font CSS

Ask AI: “Add custom font Inter to the project”
3

AI Generates

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
4

Use in Tailwind

// tailwind.config.js
fontFamily: {
  sans: ['Inter', 'sans-serif']
}

​
Google Fonts

Easier approach - use Google Fonts: 
// In index.html or main component
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />

​
Icons

​
Using Lucide Icons

Built-in icon library: 
import { Home, User, Settings, ShoppingCart } from 'lucide-react'

function Navigation() {
  return (
    <nav>
      <Home className="w-6 h-6" />
      <User className="w-6 h-6" />
      <Settings className="w-6 h-6" />
      <ShoppingCart className="w-6 h-6" />
    </nav>
  )
}

​
Custom SVG Icons

// Import SVG as component
import { ReactComponent as CustomIcon } from './assets/icons/custom.svg'

<CustomIcon className="w-6 h-6" />

​
Asset Best Practices

  • Compress images first
  • Resize to needed dimensions
  • Use appropriate formats
  • Remove metadata
  • WebP for photos
  • SVG for logos/icons
  • AVIF for best compression
  • PNG only when needed
  • Host videos on YouTube/Vimeo
  • Use Cloudinary for images
  • External hosting for large assets
  • Faster load times
  • hero-background.jpg not IMG_1234.jpg
  • product-thumbnail.png not image-2.png
  • Descriptive names help organization
  • Good for SEO

​
Deleting Assets

1

Find Unused Assets

Use asset panel to see usage
2

Check References

Ensure asset isn’t used anywhere
3

Delete

Right-click → Delete
4

Confirm

Confirm deletion (cannot undo)
Deleting assets that are still referenced in code will break your app. Always check usage first.

​
Troubleshooting

Solutions:
  • Check file path is correct
  • Verify file uploaded successfully
  • Check console for 404 errors
  • Ensure correct import syntax
  • Try absolute path (/images/file.jpg)
Solutions:
  • Optimize/compress images
  • Use WebP format
  • Implement lazy loading
  • Generate responsive sizes
  • Use CDN for large files
Solutions:
  • Check file size (max 10MB recommended)
  • Verify file format is supported
  • Check internet connection
  • Try different browser
  • Compress file and retry

​
Next Steps

Code Editor

Learn to import and use assets

Using Agents

Ask AI to optimize images

Projects

Understand project structure

Live Preview

See assets in preview