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.

Brand new feature time! This one is for PRO users only, as it relates to Asset Hosting.

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

Perhaps the biggest new feature is the ability see and edit your text-based assets. That’s stuff like CSS, JavaScript, HTML, and JSON. If the asset type you click on is editable, it will open in an editor very similar to the Pen editor. If you make any changes, use the “Save” keyboard command or press the Save button and your changes will be instantly saved.

Rename 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.

Duplicate Assets

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.

Upload Assets

You can click a button to open a file selector to upload files, or, just drag and drop!

Delete Assets

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!)

Download Assets

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.