Assets

The Asset APIs enable you to manage and interact with your site’s media files through the Designer’s Assets panel. These APIs allow you to:

  • Upload new assets to your Webflow site
  • Retrieve existing assets and their metadata
  • Update asset properties like names and alt text
  • Organize assets into folders
  • Get direct URLs to hosted assets

Using assets on a site

To display an asset on a page, you can:

  1. Create or select an asset
  2. Create an image element using the webflow.elementPresets.Image element preset
  3. Set the asset on the image element
  4. Optionally set additional properties like alt text for accessibility

Example

1// Get a file from a remote URL
2const response = await fetch("https://fastly.picsum.photos/id/336/200/300.jpg?hmac=FYvgN5rqQdtTh1q0wSE75sgfBRdhD-qNJwP12mTVXTc")
3const blob = await response.blob()
4const file = new File([blob], "bikelocks.jpg", { type: 'image/jpeg' });
5
6// Create an asset from the file and set alt text
7const asset = await webflow.createAsset(file)
8await asset.setAltText('Candid photo of Marvin the Paranoid Android')
9
10// Get Selected Element
11const selectedElement = await webflow.getSelectedElement()
12if (selectedElement) {
13
14 // Insert Image after selected Element
15 const newImage = await selectedElement.after(webflow.elementPresets.Image)
16
17 // Set the asset on the image element
18 await newImage.setAsset(asset)
19}

Supported file types

The Asset APIs support various file types including images, documents, and Lottie animations. Refer to the accepted MIME types listed below for compatibility. Lottie files should be passed as application/json MIME types.

MIME Types
1'image/jpeg'
2'image/jpg'
3'image/png'
4'image/gif'
5'image/svg+xml'
6'image/bmp'
7'image/webp'
8'application/pdf'
9'application/msword'
10'application/vnd.ms-excel'
11'application/vnd.ms-powerpoint'
12'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
13'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
14'application/vnd.openxmlformats-officedocument.presentationml.presentation'
15'text/plain'
16'text/csv'
17'application/vnd.oasis.opendocument.text'
18'application/vnd.oasis.opendocument.spreadsheet'
19'application/vnd.oasis.opendocument.presentation'
20'application/json'

Files upload to the Assets panel are not restricted — that is, they are publicly available and discoverable, but won’t necessarily be discovered or indexed by search engines if the file isn’t on a publicly viewable webpage or linked elsewhere. Learn more about asset privacy in Webflow.

Properties

PropertyDescription
idUnique identifier of the Asset
Built with