Collections are groups of Pens, Projects, and even other Collections. It’s a way to organize and share things that have some useful or fun connection. For example, you might create a Collection of user interface components you’d like to implement on a particular project. Or group together things that serve as starts for assignments in a web education class. A Collection could be a tribute to the The Smurfs. Anything you want!

You don’t have to own a Pen, Project, or Collection to put in one of your Collections. That’s part of the fun! It’s your opportunity to curate content together from anyone in any way you want.

Creating a new Collection

There are lots of ways to create a new Collection.

The “Create” Menu

You can start a new Collection from the “Create” menu on the homepage. Select “New Collection” from the dropdown menu to get started.

From the Pen or Project Editor

There is an “Add to Collection” button at the bottom of the Pen or Project Editors. You can use that to add it to an existing Collection, or create a new Collection:

You won’t see this button if the Pen is Anonymous (has /anon/ in the URL) or you’re looking at a Private Pen that you don’t own.

If you create a Collection this way, the Pen or Project you did it from will automatically be added to the new Collection.

Around CodePen

We show Pens, Projects, and Collections in grids and lists in Your Work, on profile pages, and when you browse or search Pens. Click the three-dot icon on the Pen to open the actions menu. Select “Add to Collection” to open your Collections menu:

Then, select “Create a New Collection”.

You’ll be prompted to name and save your Collection.

Collection Information

Collections have a title and a description. You can write the description in Markdown, giving you an opportunity to express all you want about what the Collection is about, including adding links.

Adding a Pen, Project or Collection to a Collection

Two choices here, and they are the exact same as two of the above choices for making new Collections:

1. From the “Add to Collection” button in the lower right of the desktop Editor
2. From the grid. Click the three-dot Menu then select “Add To Collection”

The Collections modal automatically brings your most recent Collection to the top of the list, but you can search for another Collection (or start a new one) from the modal.

You can even add a Collection to a Collection, either from the grid or from the header of a Collection.

Sorting and Reordering a Collection

Items in a Collection have an “Order”, which sets their position in the default view of the Collection. The first Pen in a Collection is at position 0.

You can move items around in your Collection by dragging them to a new position, or editing their “Position” number in the Collection’s list view.

You can sort your collection by Date Added, Date Created, and Last Updated.

By default, others will see your Collection sorted by Order. But, you can share the Collection sorted by Date Added, Date Created, or Last Updated by copying the URL of the sort you would like to share.

For example, here is the URL for team CodePen’s #CodePenChallenge: Bubbles Collection sorted by Last Updated (Newest): https://codepen.io/collection/AZvoMN?sort_order=desc&sort_by=item_updated_at&grid_type=grid

How many Collections can you make?

As many as you want!

Can Private Items be in Collections?

Yes, but they’re different from public Pens, Projects, or Collections.

In a public Collection, only you can see private things. They’re invisible to everyone else.

In a private Collection, all of the items are visible to anyone who has a link to the Collection. This enables you to share a Collection of private work with a client or employer without making it visible to the general public. Remember that no one can see your private Collection unless you give them a link to it, so it won’t be visible anywhere on your public profile.

We have more information on how privacy works in our documentation for Privacy.

Browsing Collections

All Collections belong either to a user or a Team. You can find them on their profile pages, like this:

You can also find interesting Collections across CodePen in the Trending Feed and from users you follow in the Following Feed.

Deleting & Editing Collections

Click the 3-dot menu at the right of the Collection header to open the Edit and Delete menu.

You can edit the name, description, and privacy of a Collection from the Edit modal.

Careful when deleting a Collection! We’ll give you a big ol’ warning modal box, but if you proceed, that permanently destroys the Collection and we cannot restore it.

Deleting a Collection only deletes the Collection, not the Pens inside in the Collection. See the documentation on Deleting Pens for details on how to delete a Pen.

Removing from a Collection

When viewing the Collection, click the 3-dot menu on the item you would like to remove, then select “Remove from Collection” from the options.

You may also remove things from the Add to Collection menu by clicking the checkmark next to any Collections they are in.

What is the difference between Collections and Tags?

When you create a Pen or Project, you can apply tags to it. Since only you control that, tagging is useful for grouping together things you own. And since tags are global, it groups that Pen together with other people who have chosen to tag their Pens the same thing.

How do Team Collections work?

Exactly the same, except that everyone on the Team can add or remove Pens from the Collection as well as edit its title and description.

PRO Feature: Private Collections

PRO members can create private Collections. You can make a collection private by sliding the toggle switch to Private on the “Create New Collection” screen.

We have more details on how private Collections work in our private collections blog post