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!
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.
In 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.
In Any Grid View
We show Pens in a "grid" in your Dashboard, on your 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.
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:
- From the button in the lower right of the desktop Editor
- From the grid. Click the 3-dot Menu > 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.
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.
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
Click the 3-dot menu on the Pen you would like to remove, then select "Remove from Collection" from the options.
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 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