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 server as starts for assignments in a web education class. Or a group of Pens that are a tribute to The Smurfs. Anything you want!

Here's a Collection of Pens Greensock put together to showcase examples of Pens using their MorphSVG plugin.

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 three places you can create a new Collection. They are no different from one another, it's just a matter of convenience.

Create a Collection from your Profile

There is a button when you browse to your Collections:

Create a Collection from the Editor

There is a dropdown menu in the lower left of the desktop Editor that is for adding Pens to Collections, in which you can also create a new Collection:

You won't see this dropdown 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.

Create a Collection from the Grid

If you hover over a Pen while browsing CodePen, you'll see a "Add To Collection" button. If you click it, you'll see a dropdown like this in which you can add a Pen to a Collection, or create a new one:

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

New 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 dropdown in the lower left of the desktop Editor
  2. From the grid. Hover > Add To Collection > Select Collection from Dropdown

Search is a great place to scour for Pens to add to a Collection!

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

There are buttons to delete and edit collections right on the Collections pages themselves.

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. (You could make it again from scratch though.)

Removing a Pen from a Collection

Just the click of a button:

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 it's title and description.

Can I subscribe to a Collection?

You can! Every Collection has an RSS feed. Here's an example of a feed. You can find the link to the feed from the RSS icon in the header of any Collection:

Here's an example of subscribing to a Collection in the RSS reader app Feedly:

PRO Feature: Private Collections

PRO members can now 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