Collections are groups of Pens (and other Collections) that you intentionally add and arrange. Your Collections can be public or private and have a sharable URL just like Pens. Their purpose is organization and sharing.

Use Cases & Examples

  • You have an upcoming freelance project you are gathering inspiration for, so create a Collection named “Inspo for 2025 Gala Website” and add to it.
  • You’ve created a series of challenges for a class you’re teaching, so you use a Collection named “Intro to HTML — Fall 2025” and add all of those challenge Pens to that so it’s easily sharable all together.
  • You’re really into creating and playing mini-games, so you create a Collection called “G-G-G-Games!” so you have an easy place to come back to to find all the ones you’ve saved.
  • CodePen Challenges have a Collection for every different week. For instance, “#CodePenChallenge: Sierpinski Fractals

Creating Collections

You can create a new Collection anytime from the logged in homepage (typically: the Your Work page sidebar), the User Menu, or even right on-the-fly when you choose to add a Pen to a Collection. You’ll see an option to “Create a New Collection”, then you can name it and “Create & Add to Collection”).

There are no limits to how many Collections you can make, nor to how many Pens and Collections can be added to a Collection.

Adding & Removing from Collections

Anywhere you can see a Pen, you can manage what Collections it is a part of. You’ll typically find a menu option like Add to Collection.

From the menu that comes up, you’ll see a list of Collections (with your most recently interacted with Collections at the top) and either (+) or (✓) buttons. The (+) button allows you to add it to that existing Collection while the (✓) button indicates the Pen is already in that Collection, and clicking it will remove it.

You can also delete entire Collections anytime, from the Collection page itself with the Delete Collection button under the menu . This action is permenant and the Collection may not be restored. Note that when you delete a Collection it is only the Collection that is deleted, not the Pens or other Collections it contains.

Organizing & Viewing Collections

Collections can be viewed in different ways and even manually re-ordered. Learn more about Views & Ordering Collections.

Collections & Privacy

Private Pens and Collection can be in Collections, but they behave a bit differently than Public items. You can also make Collections private in and of themselves, which also effects how private Pens behave inside of them. Learn more about Collections & Privacy here.

Collections vs. Tags

When you create a Pen, you (and your fellow editors) can apply tags to it. Tags have global pages (e.g. cube) making them similar to Collections, except that anyone can tag a Pen that same tag and become part of that page. That makes tags a system of ad hock community organization, where you control if you want your Pens to be part of it or not.

With Collections, the control is entirely yours on what goes in and what doesn’t. But also other people can put your Pen in their Collection (if it’s Public).

Learn more about tags here.

Teams & Collections

Teams can own Collections as well. They work exactly the same, except that everyone on the Team can add or remove Pens from the Collection as well as edit the title and description of the Collection itself. To work on a Collection on behalf of a Team, you need to switch from your User context to your Team context.