Skip to main content
Assets are the media files that power your content — images, videos, audio, 3D models, and documents. Upload them once, use them everywhere. Assets are stored on a CDN and served globally with automatic optimization.

​
The asset library

Navigate to Assets in your project sidebar to access your asset library. You can view assets as a grid (default) or list, and filter by type, tags, or search by name.

​
Upload assets

Upload files in two ways:
  • Click the upload button — select files from your computer
  • Drag and drop — drop files directly onto the asset library
Metabind accepts:
TypeFormats
ImagesJPEG, PNG, GIF, WebP, SVG, BMP, TIFF, ICO
VideoMP4, WebM, MOV, OGG, AVI, MKV
AudioMP3, WAV, OGG, M4A, FLAC, AAC
3D ModelsGLB, GLTF, USDZ, OBJ, FBX
DocumentsPDF, DOC, DOCX, XLS, XLSX, PPT, PPTX, TXT, CSV
When you upload a file, Metabind automatically extracts metadata — dimensions for images, duration for video, and format details for all files.

​
Use assets in content

When editing content, asset fields let you select media from your library. Click an image or video field to open the asset browser, search or filter to find what you need, and select. Selected assets display as thumbnails in the content builder. Click to replace with a different asset.

​
Use assets in components

Components can reference assets through their properties. When you define an image or video property type in a component, content teams can select assets when using that component. 
const properties = {
  heroImage: {
    type: "image",
    title: "Hero Image"
  },
  backgroundVideo: {
    type: "video",
    title: "Background Video"
  }
} satisfies ComponentProperties;
In your component body, use the asset reference: 
Image(props.heroImage)
  .frame({ height: 300 })
  .clipped()

​
Organize assets

​
Folders

Create folders to organize assets by project, campaign, or content type. Drag assets between folders or right-click to move them.

​
Tags

Add tags to assets for flexible categorization. Unlike folders, assets can have multiple tags. Use tags to quickly filter the library when selecting assets for content. Search assets by name or description. Combine search with type filters to narrow results — for example, search “hero” filtered to images only.

​
Asset details

Click any asset to view its details panel:
  • Preview — see the asset at full size
  • Metadata — dimensions, file size, format, duration
  • Usage — which content and components reference this asset
  • Tags — add or remove tags

​
Image optimization

Images served from the CDN are automatically optimized. You can also request specific sizes and formats using URL parameters:
ParameterPurposeExample
wWidth in pixels?w=800
hHeight in pixels?h=600
fitResize mode?fit=cover
qQuality (1-100)?q=80
fmOutput format?fm=webp
For example, to get an 800px wide WebP version: 
https://cdn.metabind.ai/.../image.jpg?w=800&fm=webp
The SDKs handle this automatically — you typically don’t need to construct these URLs manually.

​
Asset protection

Assets referenced by published packages can’t be deleted. This ensures your live content always has access to its media. If you try to delete an in-use asset, Metabind shows which packages and content reference it. To remove an asset that’s in use, first update the content or components that reference it, then delete.

​
What’s next

Content

Learn how to use assets when creating content.

Components

Build components that use image and video properties.