Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
You’ve long been able to upload assets from the Editor, now we have a full on Asset Manager for working with your Assets.
Here’s a quick video introducing it:
Getting to the Asset Manager
You get there from the user dropdown menu:
What you can do in the Asset Manager
Edit text-based Assets
Also new: you can change the file name of assets. Beware: if a Pen links to a certain Asset and you change the name, that will break the link.
Another new thing: you can make a copy of any asset in one click. The new copy will have
_copy appended to the name (feel free to rename it). Useful for making alterations of text-based assets.
Search for Assets
There is a filter input you can type in to narrow down your assets by file name.
You can click a button to open a file selector to upload files, or, just drag and drop!
You can delete files from the mini Assets pane in the Editor, but doing it from the Asset Manager is nicer because you can preview the asset before deleting (so you know what you’re getting rid of!)
We show you the URL of the Asset and provide a button for opening it so you can see it in the browser. You can also use that to download the Asset.
View your Available Space
We show you how much space you have left on your plan right in the header.
See Information about an Asset
The file size. When it was uploaded. Who it was uploaded by (useful for Teams).
Last but definitely not least: you can now overwrite existing files. Before it would automatically rename a file you’re uploading with the same name, but no more. Now you have a choice:
- Have us rename the file as it uploads
- Overwrite the existing file
Overwriting can be particularly useful when you’re working on an asset locally and you just need to replace the one that’s hosted online.
We hope this is useful to you. Let us know about any wishes, bugs, etc in the comments.