What is Asset Hosting all about?
“Assets” is just another name for files. Any type of file, like images (JPG, PNG, GIF, etc), CSS files, JavaScript/JSON files, audio, video… really anything!
CodePen PRO accounts offer asset hosting. In other words, you can upload files directly to CodePen to use in the Pens that you build. For example, host an image file to use in a demo. Rather than the awkward steps of finding somewhere else to host those images for you, you can now just drag a file right onto CodePen to upload it, we’ll host it for you, and you can use it anywhere you like.
This makes working in CodePen even easier and even more fun!
Upload files right from the editor
It’s fast and easy. Just open the Assets panel, then drag and drop a file (or files) onto that area. They will upload and then slide down into the appropriate area based on their type. Click on them to get the URL to where they are hosted. You can use that as a src for an image, as an external resource, or anywhere else you need to link up a file.
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
- Delete Assets
- Duplicate Assets
- Rename Assets
- Search/Sort/Filter Assets
- Download Assets
- See how much storage space you have left for uploading
What kind of files can I upload?
Anything you want. Images are common, but you could upload JavaScript or CSS and link those up as external resources. You could host a PDF if you wanted. You could upload a short movie clip to work on HTML5 video. You could even upload some JSON to make Ajax requests against.
Are there any disallowed files?
All uploaded files must adhere to our Terms of Service. Nothing that would violate copyright in the way you are using it. Nothing offensive. We also ban .exe files as they can be quite nefarious and there is no practical use of those on the web anyway.
Can the Assets be served over HTTPS?
Yep. Your hosted assets are HTTPS by default, and you should probably use them that way. You can always use an HTTPS asset on an HTTP page, it’s just the other way around that is bad news.
How much storage space do I have?
| Per File Limit | Total Storage | |
|---|---|---|
| Free | None (upgrade!) | None (upgrade!) |
| Starter PRO | 5 MB | 2 GB |
| Developer PRO | 10 MB | 10 GB |
| Super PRO | 15 MB | 20 GB |
Can I upload multiple files at once?
Yep! 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.
What happens if I run out of space?
You won’t be able to upload any more files. You can always delete some files to make room. Or if you are a Starter or Developer PRO, you can always upgrade tiers. Super PRO is the highest tier with the most storage space and largest allowed per-file sizes.
Is there a bandwidth limit?
Nope.
What happens when I upload the same resource again?
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
How are these cached?
We set proper 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 )
Can I edit files I’ve already uploaded?
You can! Click the edit button next to text-based files and images to open up the great editing experiences.
Editing Text Files
Edit your text assets using the same code editing experience you know & love! You can even edit Assets right within the Pen Editor:
Editing & Optimizing Images
Resize, rotate, and adjust quality in the new image editor without changing the original image! Make your tweaks then save as a new image or copy the optimized URL to get a dynamic served version of your image.
Available URL Parameters for Image Assets
You can manually add these URL parameters to your CodePen hosted images, or use the image editor to get great visual of the available URL parameters. The parameters can always be adjusted later in your code.
| Key | Value | Description |
|---|---|---|
width | Number | Desired width of the image |
height | Number | Desired height of the image |
fit | scale-down|cover|pad | Control how the image fits into the given width/height. scale-down keeps the aspect ratio. cover and pad size at the exact given width & height, with cover filling the whole canvas with the image and pad scaling the image down to fit within the canvas. |
rotate | 0|90|180|270 | Direction to rotate the image |
format | auto | Automatically convert the JPG, GIF and PNG images to WebP if the browser supports it, otherwise the original format is returned. |
quality | Number from 0 to 100 | Adjust the quality to get a smaller filesize through lossy compression. This setting only applies to JPEG, GIF, and WebP images. |
Examples of the Image Asset URL Parameters
I’m getting a CORS error
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.
- Your best bet is to make sure you’re using our new URL format, the one that starts with
assets.codepen.io - If you’re using the older
s3-us-west-amazonaws.com(or even older formats), we still try to set permissive CORS headers, but it’s tricky, so see #1.
Note that you may need to handle CORS directly in your code, with things like the crossorigin attribute or .crossOrigin property.