Collections are groups of Pens. It’s a way to organize and share Pens 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 a group of Pens that serve as starts for assignments in a web education class. Or a group of Pens that are a tribute to The Smurfs. Anything you want!

A Collection of Pens

You don’t have to own a Pen to put in one of your Collections. That’s part of the fun! It’s your opportunity to curate content together 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 Editor

There is an “Add to Collection” button at the bottom of the Pen Editor. You can use that to add the Pen 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 you did it from will automatically be added to the new Collection.

Around CodePen

We show Pens in grids and lists in your Dashboard, 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 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.

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.

List view of a Collection with the position text box open
Re-order items in a Collection by clicking and dragging the drag handle (at the left of the title), or editing the position number (revealed on hover)

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 Pens be in Collections?

Yes, but they’re different from public Pens.

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

In a private Collection, all of the Pens 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 browse Collections globally on CodePen, for example:

  • Picked Collections (Collections chosen by CodePen Staff or invited guests)
  • Popular Collections (Collections determined to be popular via algorithm factoring in things like hearts, views, age, etc.)
  • Following Collections (Collections from people you follow on CodePen)

You can find all this browsing on the Explore Collections page.

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 a Pen from a Collection

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

You may also remove Pens 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, you can apply tags to it. Since only you control that, tagging is useful for grouping together Pens 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