Your PRO Asset Hosting gives you a spot to upload a file once, then use it everywhere on CodePen.

It’s handy for files you plan to use in lots of different Pens. Your asset hosting also includes helpful features for managing & editing your files, and optimizing images.

Images are probably the most popular asset, but you could upload JavaScript or CSS and link those up as external resources. You could host a PDF if you wanted, short video file, or 3D model file. You could even upload some JSON to make fetch requests against like a mock API.

Uploading Files

Read about how to upload assets.

The Asset Manager

We give you full control and management of all your Assets on CodePen, via the Asset Manager. You can access the asset manager from your user menu, or go right to /assets/.

From inside the Asset Manager, you can:

  • Upload Assets (drag and drop, or file select)
  • Edit text-based assets, like CSS, JavaScript, JSON, etc.
  • Preview image assets
  • Crop and optimize image assets
  • Delete Assets
  • Duplicate Assets
  • Rename Assets
  • Search/Sort/Filter Assets
  • Download Assets
  • See how much storage space you have left for uploading

Asset Storage

Per File LimitTotal Storage
FreeNone (upgrade!)None (upgrade!)
Starter PRO5 MB2 GB
Developer PRO10 MB10 GB
Super PRO15 MB20 GB

Multi-File Upload

You can select or drag & drop multiple files onto our file picker. In the Asset Panel in the editors, the files will just upload straight away. In the Asset Manager, you’ll see a file list first, allowing you to add more, remove some, or edit the files before uploading.

Asset File Naming

You can use any naming convention you like. If you upload a file that has the exact same name as a file that is already there, we’ll append a number to the end of the file name. For instance:

kitten.jpg
kitten_1.jpg
kitten_2.jpg

Asset Caching

We set etag and cache-control headers on your assets to help show any updates if you edit an asset or delete & upload a new file with the same name.

Occasionally you may still see the old version of a file. The best way to combat that browser cache is to change the file name to something the browser hasn’t seen before. You can do that by renaming the file itself, or by appending a query string ( my-image.jpg?v=2 )

Asset File Editing

Read about editing assets.

CORS Headers

CORS is tricky stuff sometimes. The errors can be intermittent. Caching is involved. Browsers do things differently. Seemingly correct headers can not work as expected. But good news! We do everything we can to make sure your assets are set with wide-open permissive CORS headers.

Note that you may need to handle CORS directly in your code, with things like the crossorigin attribute or .crossOrigin property.

Limitations

There aren’t many! Read about limits on assets.