Asset Hosting is one of our PRO features here on CodePen. We’ve just totally redesigned and rewritten it to make the experience much better. Let’s walk through all the things you can do with it, showing off the new interface and functionality.

Uploading an image and using it

This is likely the #1 usage of Asset Hosting: you have an image that you need to use in a Pen, and you need to upload it somewhere reliable to link to and use. Here’s how quick and easy it is:

  1. Open the Assets Panel
  2. Drag and Drop the image (or any other asset)
  3. Grab the URL

Cropping an image during upload

The Assets Panel right within the Pen Editor is extremely useful as it’s right within the editor where you likely need the files. Because of that, we try and stay out of your way in uploading as best as possible, just drag and drop.

But we also have an Asset Manager page that has also been entirely revamped and offers new functionality, even during uploading itself!

Note the other options available there to while editing and image, making it into a circle, and rotating. All these options, and in fact the whole uploader itself, come by way of Filestack, which we’re now using. The Filestack uploader is really well done and allows us to offer this much more reliable and fully-featured asset upload experience. Heck, you even get an upload progress bar now instead of just a spinner!

Filtering, Searching, Sorting

We wanted to make it as easy as possible to find all your existing assets. You can do a quick search for them, filter by file type groupings, and sort by useful things like date uploaded, file size, and alphabetical based on file name.

Previewing Assets

Rollovers on images, video, and audio assets will show you a preview (hover either the filename or the 👁 icon). Or, click on the asset to see a larger preview.

This works in the Asset Manager, but the popups also work in the Asset Panel right in the Pen Editor. Here’s an example of some video and audio previews:

Quick Access Actions

The three-dot “kebab” (•••) menu for each asset has a variety of actions you can do with that asset. All of them have certain common actions, and different file types have specific actions that are useful to them.

All assets have:

  • Copy URL
  • Duplicate
  • Delete

Image assets have:

  • Copy as HTML <img>
  • Copy as CSS background-image
  • Copy as Markdown ![]() image

JavaScript assets have:

  • Copy as HTML <script>
  • Add as External Resource*

CSS assets have:

  • Copy as HTML <link>
  • Copy as CSS @import
  • Add as External Resource*

* Super useful! Rather than copy-and-pasting the URL over there, it’s a one-click action.

Uploading from URLs

Say you have a URL to the image already somewhere on the internet. You might be able to use the asset directly from there, but that isn’t really under your control all the time*. With our new uploader (Asset Manager only), you can paste in the URL for that asset and we’ll upload that way.

* Speaking of control, assets hosted through us have the correct CORS headers via our S3 bucket policy, which you aren’t likely to get with random assets around the internet. We might change the URL we give out for assets eventually so we can offer more features, but your existing URLs will always work and always have the right CORS.

Easy Multiple File Upload

If you have a bunch of files to upload, it’s never been easier! We don’t cap the number of files you have in assets, there is only a total storage limit and per-file size limit (limits vary based on your PRO tier).

Here’s another little thing to know: if you upload a file with a duplicate name, we’ll just rename it for you so it doesn’t conflict. That way we just stay out of your way. If you don’t like the name, you can always change it easily, as long as it doesn’t conflict. And if it does conflict, you can change or delete the original.

You don’t have to re-upload to duplicate either, duplication can be done right from any assets menu.

Mobile Uploading Support

You can now upload from your phone, so that’s nice.

Higher Limits!

To cap off this release we literally more than doubled everything.

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