Component Assets Overview

Components can have bound assets (images, icons, fonts, etc.) that are included when the component is packaged. These assets are served from the CDN and referenced in the component code using the asset() function.

Asset URL Structure

Component assets are served with this URL pattern:

https://cdn.metabind.ai/{organizationId}/{projectId}/components/{componentId}/latest/assets/{assetId}/{filename}

Using Assets in Components

Reference bound assets in component code using the asset() function:

const body = () => {
  // Reference asset by name (without extension)
  const logoUrl = asset('logo-2x');

  // Use in Image component
  return Image(logoUrl);
};

Multiple Resolution Assets

For responsive assets, upload multiple resolutions and select dynamically:

const body = () => {
  const scale = env.scale || '2x';
  const assetName = `logo-${scale}`;

  // Falls back to 2x if requested scale not available
  return Image(asset(assetName) || asset('logo-2x'));
};

When a package is created, all assets referenced by the component are included in the package and served from versioned URLs.

Discard Changes Upload Component Asset

​Asset URL Structure

​Using Assets in Components

​Multiple Resolution Assets

Asset URL Structure

Using Assets in Components

Multiple Resolution Assets